Chrome的粘滞菜单问题

时间:2013-11-08 14:53:02

标签: google-chrome menu sticky

我正在使用以下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 with double menu。您可以在此处查看该网站:The Bespoke Florist。我已经在三台独立的机器上复制了这个问题,但它似乎只与Chrome有关。非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

很抱歉回答我自己的问题。 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>