Jquery 在页眉和页脚之间滚动

Question

我试图在页面顶部保留一个 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”的末尾停下来，她会回到他的顶部 :( 我错过了什么？谢谢你的帮助^^

Answer 1

如果您将#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

Answer 2

当窗口的scrollTop() 高于.my-footer 元素的顶部减去#mini-mini2 元素的高度时，要限制下滚动，您需要放置删除类。试试这个：

$(window).scroll(function() {
    var $mini = $('#mini-mini2');
    var toggle = $(window).scrollTop() >= breaking && $(window).scrollTop() <= (limit - $mini.height());
    $mini.toggleClass("floatable", toggle);
});

Updated fiddle