jquery - 位置固定的 Div，直到特定高度出现故障

Question

我无法修复随页面向下滚动并停在特定高度的脚本。就在它到达需要再次处于绝对位置的点之前，它消失了一会儿，然后立即出现。

这是一个 the code 的例子:

$(document).scroll(function () {
    var y = $(this).scrollTop();

    if (y > 280 && y < 1600) {
        $('#model').css("position","fixed");
        $('#icons').css("position","fixed");
        $('#icons').css("bottom",0);
    } else if (y >= 1601) {
        $('#model').css("position","absolute");
        $('#model').css("top",1600);
        $('#icons').css("position","absolute");
        $('#icons').css("top",1600);
    } else {
        $('#model').removeAttr( 'style' );
        $('#icons').removeAttr( 'style' );
        $('#icons').removeAttr( 'style' );
    }   
});

感谢任何帮助!

Answer 1

您提到的故障可能是由以下两种情况之一引起的:

1. 对于第一个条件，您的 scrollTop 范围介于 280 之间& 1599 ( < 1600 )，以及进一步的 >= 1601 .这会在滚动顶部位置留下一个空白区域1600本身。
2. 当您从底部滚动到顶部时，#model div 的顶部没有设置回原始状态(0)，我想它以某种方式徘徊到它的容器边界。

因此，您的代码中的以下更改应该可以解决该问题:

if (y > 280 && y < 1600) {
    $('#model').css("position","fixed");
    $('#model').css('top', 0);          // add this rule
    $('#icons').css("position","fixed");
    $('#icons').css("bottom",0);
} else if (y >= 1600) {                 // change the condition to include range greater than or equal to 1600
    $('#model').css("position","absolute");
    $('#model').css("top",1600);
    $('#icons').css("position","absolute");
    $('#icons').css("top",1600);

JSFiddle Demo .