Question

我有两个要素。第一个使用浏览器的100％高度，位于fixed。第二个元素的位置top: 100%;显示在第一个固定的位置下方。

我设置了它，所以当滚动时，第二个元素可以滑过第一个元素。到目前为止没问题。

但是现在，我想要.remove()第一个元素，在我滚动到第二个元素之后。所以第二个替换第一个元素。

为了做到这一点，我必须将第二个元素重新定位到top: 0，而不是初始top: 100%。然后我还必须scrollTop(0)才能看到第二个元素的顶部，因为它已经重新定位。

然而，最后一步导致页面闪烁（10次中有9次）！我该如何解决这个问题？

有没有更清洁的方法来实现这一目标？

更新：到目前为止闪存只出现在Safari中，Chrome完美无瑕。在Firefox中它甚至不起作用..这只是基本的jQuery，对吧？

这是我的jQuery代码：

$(window).scroll(function() {
    if ($('body').scrollTop() >= $('body').height()) {
        $('#elem-2').css({top: '0'});
        $('body').scrollTop(0);
        $('header').css({position: 'fixed'});  // header inside #elem-2
        $('#elem-1').remove();
    }
});

CSS：

#elem-1 {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: #00a1b1;
}

#elem-2 {
    position: relative;
    top: 100%;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 1;
}

header {
    position: relative;
    top: 0;
    width: 100%;
    height: 130px;
    display: block;
}

任何？

jQuery向下滚动100％，将元素重新定位到顶部：0，导致闪烁

0 个答案: