0

我有两个元素。第一个使用浏览器的 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;
}

任何人？

4

0 回答 0