javascript - 固定在页面底部停在给定位置的 div

Question

我在页面底部修复了 div，效果很好。我想知道当用户向下滚动到它时，是否有一些简单的方法可以让它在页面的某个地方“停止”。我希望它保持固定在底部，直到用户向下滚动到页面上某个定义的位置，然后将其粘贴到页面并像其他内容一样滚动。有什么建议吗？

Answer 1

我尝试在 jsfiddle 上设置一些东西。在我写的时候，我看到其他人已经发布了他们的替代方案。如果我有任何帮助:http://jsfiddle.net/PnUmM/1/

我在 CSS 中将位置设置为相对位置，计算它在文档加载时的位置以保留信息，然后将其设置为固定位置。

var sticky_offset;
$(document).ready(function() {

    var original_position_offset = $('#sticky_for_a_while').offset();
    sticky_offset = original_position_offset.top;
    $('#sticky_for_a_while').css('position', 'fixed');


});

$(window).scroll(function () {
    var sticky_height = $('#sticky_for_a_while').outerHeight();
    var where_scroll = $(window).scrollTop();
    var window_height = $(window).height();


    if((where_scroll + window_height) > sticky_offset) {
        $('#sticky_for_a_while').css('position', 'relative');
    }

    if((where_scroll + window_height) < (sticky_offset + sticky_height))  {
        $('#sticky_for_a_while').css('position', 'fixed');
    }

});