固定div在页面底部停止在给定位置

Question

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

Answer 1

我尝试在jsfiddle上进行设置。在撰写本文时，我发现其他人已经发布了他们的替代方案。

我在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');
    }

});