2

我创建了一个粘性导航，当用户滚动时它会固定在页面顶部。如果用户向上滚动，它应该返回到正常位置。我在我的本地主机上完美地运行了这个，但是当我在线上传它时，只要你滚动一点页面，粘性导航就会一直直接跳到顶部，并且它永远不会回到它的正常位置。

相关的jQuery是：

var yOffset = $("#local-nav-wrapper").offset().top;
$(window).scroll(function() {
    if ($(window).scrollTop() > yOffset) {
        $("#local-nav-wrapper").css({
            'top': 0,
            'bottom': 'auto',
            'position': 'fixed'
        });
    } else {
        $("#local-nav-wrapper").css({
            'top': 'auto',
            'bottom': 0,
            'position': 'absolute'
        });
    }
});

相关的 CSS 是：

#local-nav-wrapper {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    z-index: 6000;
}
4

2 回答 2

1

如果您在 IE 中工作，请尝试替换$(window).scrollTop()为document.documentElement.scrollTopor window.scroll(0,0)。也许它有帮助。

于 2012-10-09T13:15:02.683 回答
0

我正在解决同样的问题。我发现这个关于 css 技巧的线程表明：

当它在 localhost 中加载时，它会非常快地获得正确的值，但在服务器上它会在设置元素之前获得值。

于 2016-03-29T15:39:55.947 回答