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

Question

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

Answer 1

我尝试在jsfiddle上设置一些东西.在我写这篇文章的时候,我看到其他人已经发布了他们的选择.如果我的帮助有任何方式:http://jsfiddle.net/PnUmM/1/

我在CSS中将位置设置为relative,计算文档加载的位置以保留信息,然后将其设置为固定.

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

});