javascript - jQuery在页眉和页脚之间滚动

我正在尝试在页面顶部保留一个div，但是，当我跨过我的观点时，我想在另一个div之前停止滚动。

<div class="my-top"><p>This is my top</p></div>
    <div class="big-one">
        <div class="mini1">
            <p>TEST 1</p>
        </div>
        <div class="mini2">
            <div id="mini-mini2">
                <p>Need to scroll</p>
            </div>
        </div>
    </div>
    <div class="my-footer">
        <p>This is my footer</p>
    </div>

这是一个小提琴=> https://jsfiddle.net/2q773opz/3/

当我滚动时，我的div下降了，但是她可以在“ mini2”的结尾处停下来，然后回到他的顶部：(
我错过了什么？感谢您的帮助^^

最佳答案

如果将#mini-mini2的父级设置为position:relative，则可以在其中完全放置#mini-mini2。然后只需让您的JS将元素的位置top设置为当前scrollTop减去标题高度（使用类似的逻辑即可防止#mini-mini2推得太远。

这是基本的，但是作为概念证明，请参见以下示例：

$(document).ready(function() {
    var breaking = $('.big-one').offset().top;
    var limit = $('.my-footer').offset().top - $('#mini-mini2').height();
    $(window).scroll(function() {
        var scrolltop = $(window).scrollTop();
        var top = scrolltop - breaking;
        if (scrolltop > breaking && scrolltop < limit) {
            $('#mini-mini2').css("top", top);
        }
    });
});

.my-top,
.my-footer {
    width: 100%;
    height;
    50px;
    border: 1px solid;
}

.my-top {
    height: 250px;
}

.my-footer {
    height: 450px;
}

.big-one {
    display: table;
    width: 100%;
}

.mini1 {
    display: table-cell;
    width: 74%;
    border: 1px solid;
    height: 250px;
}

.mini2 {
    display: table-cell;
    width: 24%;
    border: 1px solid;
    position: relative;
}

#mini-mini2 {
    display: block;
    border: 1px solid #ff0000;
    text-align: center;
    background-color: #fff;
}


/*.big-one div.floatable {position:fixed;top:2px;}*/

#mini-mini2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-top">
    <p>
        This is my top
    </p>
</div>
<div class="big-one">
    <div class="mini1">
        <p>
            TEST 1
        </p>
    </div>
    <div class="mini2">
        <div id="mini-mini2">
            <p>
                Need to scroll
            </p>
        </div>
    </div>
</div>
<div class="my-footer">
    <p>
        This is my footer
    </p>
</div>

另外：Updated jsFiddle



更新

尽管上述版本有效，但如果滚动太快，可能会错位#mini-mini2。为了解决这个问题，最好将元素position:fixed和top与bottom进行切换，以使其像这样正确放置：

$(document).ready(function() {
    var breaking = $('.big-one').offset().top;
    var limit = $('.my-footer').offset().top - $('#mini-mini2').height();

    $('#mini-mini2').css("width",$('.mini2').width());
    $(window).resize(function() {
    	$('#mini-mini2').css("width",$('.mini2').width());
    });
    $(window).scroll(function() {
        var scrolltop = $(window).scrollTop();
        var top = scrolltop - breaking;
        if (scrolltop > breaking && scrolltop < limit) {
            $('#mini-mini2').addClass("fixed");
        	$('#mini-mini2').css("bottom", "auto");
            $('#mini-mini2').css("top", 0);
        } else if(scrolltop > breaking) {
        	$('#mini-mini2').removeClass("fixed");
        	$('#mini-mini2').css("bottom", 0);
            $('#mini-mini2').css("top", "auto");
        } else {
        	$('#mini-mini2').removeClass("fixed");
        	$('#mini-mini2').css("bottom", "auto");
            $('#mini-mini2').css("top", 0);
        }
    });
});

.my-top,
.my-footer {
    width: 100%;
    height;
    50px;
    border: 1px solid;
}

.my-top {
    height: 250px;
}

.my-footer {
    height: 450px;
}

.big-one {
    display: table;
    width: 100%;
}

.mini1 {
    display: table-cell;
    width: 74%;
    border: 1px solid;
    height: 250px;
}

.mini2 {
    display: table-cell;
    width: 24%;
    border: 1px solid;
    position: relative;
}

#mini-mini2 {
    display: block;
    border: 1px solid #ff0000;
    text-align: center;
    background-color: #fff;
}


/*.big-one div.floatable {position:fixed;top:2px;}*/

#mini-mini2 {
    position: absolute;
    top: 0;

}
#mini-mini2.fixed {
    position: fixed;
    top: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-top">
    <p>
        This is my top
    </p>
</div>
<div class="big-one">
    <div class="mini1">
        <p>
            TEST 1
        </p>
    </div>
    <div class="mini2">
        <div id="mini-mini2">
            <p>
                Need to scroll
            </p>
        </div>
    </div>
</div>
<div class="my-footer">
    <p>
        This is my footer
    </p>
</div>

另外：Updated jsFiddle