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

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

对于第一个条件，您的 scrollTop 范围介于 280 和 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 固定位置直到特定高度出现故障

Div with position fixed until certain height glitching

html

css

jquery

scroll

position