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

});

Answer 2

我为你做了这件事：http://jsfiddle.net/XCYFG/1/。

$(document).ready(function() {
    window._div1 = $('#div1'); //selector is expensive
    window._window = $(window);
    $(window).scroll(function(e) {
        _div1.css("top",
                  Math.min(_window.height(),
                           window.scrollY + 100)
                  + _window.height() - _div1.height() - 110);
    }).scroll();
});

Answer 3

我有一个相反的插件 - 它位于网页的流程中，当用户滚过它时，它会固定到视口。它实际上做的是将css类应用于元素，因此您应该能够按原样使用它。

你可以在这里找到插件： https://github.com/hanssonlarsson/jquery-fixedscroll

然后我建议您在网页流程中包含您的元素：

<div id="sometimesFixed">content</div>

使用css：

#sometimesFixed {
  position: fixed;
  bottom: 0;
}
#sometimesFixed.scroll {
  position: static;
}

并在JavaScript中应用这样的插件：

$('#sometimesFixed').fixedscroll({className: 'scroll'});

还有一个更通用的插件，非常新的，称为jquery-waypoints。我们的想法是将任何代码绑定到“路点”，即网页上的点，当用户滚过它们时，会执行一些代码。

https://github.com/imakewebthings/jquery-waypoints

它可能比我的插件更优化和更合适，但是YMMV！

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

3 个答案: