Chrome 的粘滞菜单问题答案

【问题标题】：Sticky Menu issues with ChromeChrome 的粘滞菜单问题
【发布时间】：2013-11-08 23:42:30
【问题描述】：

我正在使用以下 Java 将菜单粘贴到页面顶部：

jQuery("document").ready(function($){
    var nav = $('.nav-container');
    $(window).scroll(function () {
        if ($(this).scrollTop() > 205) {
            nav.css({
                position: 'fixed',
                top: 0,
                margin: '0px',
                left: nav.offset().left,
                width: nav.width()
            });
        } else {
            nav.css({
                position: 'static',
                margin: '115px 0 0 0'
            });
        }
    });
});

Java 的功能在除 Chrome 之外的所有浏览器中都能完美运行。在 Chrome 中，当您向下滚动和备份时，它会创建一个“幽灵”菜单。你可以在这里看到它：。你可以在这里看到现场直播：The Bespoke Florist。我已经在三台不同的机器上复制了这个问题，但它似乎只适用于 Chrome。非常感谢任何帮助。

【问题讨论】：

这是 chrome 的问题，我以前见过。我不确定你能不能做点什么，但这肯定不是你的错。
是的，我认为这是 chrome 的问题，但是，我看到了其他可行的方法。我似乎无法让他们为我工作：link。据我所知，问题在于它测试滚动位置的方式。在其他情况下，它使用 var 的顶部 Y 和屏幕位置。我只是无法让这些工作中的任何一个工作......

标签： google-chrome menu sticky

【解决方案1】：

很抱歉回答我自己的问题。 Chrome 的问题在于对屏幕上的像素进行硬编码。转到动态 Div 测试，它可以正常工作。这是我的更新代码！

    <script>
  jQuery("document").ready(function($){
    var nav = $('.nav-container'),
        navOff  = nav.offset();
    $(window).scroll(function () {
        if ($(this).scrollTop() > navOff.top) {
            nav.css({
                position: 'fixed',
                top: 0,
                margin: '0px',
                left: nav.offset().left,
                width: nav.width()
            });
        } else {
            nav.css({
                position: 'static',
                margin: '115px 0 0 0'
            });
        }
    });
});
</script>

【讨论】：