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

您所指的小故障可能是由以下两种情况之一引起的：

对于第一个条件，您有一个在280＆amp;之间的scrollTop范围。 1599（< 1600），以及>= 1601。这会在scrollTop位置1600本身留下空白区域。
当您从下往上向后滚动时，#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

Div位置固定，直到某个高度毛刺

1 个答案: