【问题标题】：jquery navigation not working in webkit browsersjquery 导航在 webkit 浏览器中不起作用
【发布时间】：2021-05-19 18:26:30
【问题描述】：

我注意到我网站上的导航在 Safari 或 Chrome 中无法使用（在 Firefox 中可以正常使用）。在这两种浏览器中，它都会出现，但单击被禁用。可能是什么原因，我该如何修复？

为了清楚起见，预计到达时间： *在 Chrome 中，菜单将加载并且您可以单击，但页面不会滚动到应有的部分，如果您手动滚动，菜单也不会跟随。此外，光盘不会出现在左侧。在 Safari 中，菜单与光盘一样显示，但单击完全禁用，跟随滚动也是如此。

另外，我确定这不是我的机器独有的，因为是另一个人让我注意到了这些问题（即，这个问题已由两个不同的用户在两台不同的机器上显示*强>

live site

html

<nav>
    <ul id="Nav">
        <li><a href="#home">home</a></li>
        <li><a href="#about">manifesta</a></li>
        <li><a href="#services">services</a></li>
        <li><a href="#lookbook">lookbook</a></li>
        <li><a href="#contact">contact</a></li>
        <li><a href="#optin">goodies</a></li>
        <li><a href="http://frshstudio.com/blog">blog</a></li>
    </ul>
</nav>

css

nav {
    position: fixed;
    right: 9%;
    top: 55%
}

nav ul { 

        list-style-type:disc;
    }

    nav ul li {
        text-align: right;
        color: #fff;
    }

    nav ul li.current {
        color:#000;
    }

【问题讨论】：

菜单可以在 Firefox 上正常工作，但在我的 Linux 机器上也可以在 Chrome 上工作！
@PetjaTouru 在 Chrome 中，将加载菜单并且您可以单击，但页面不会像应有的那样滚动到该部分，如果您手动滚动，菜单也不会跟随。此外，光盘不会出现在左侧。在 Safari 中，菜单与光盘一样显示，但单击完全禁用，跟随滚动也是如此。
似乎有一些严重的动画滞后。在我的 Safari 中，我没有在导航的明显位置上获得链接操作。我确实在导航应该的位置获取链接操作 - 每当我滚动时，导航需要 5-10 秒才能赶上并显示链接操作的位置发生。在第一页之后，有时导航根本不会重新显示 - 链接操作总是在那里。
现在正在为你解决这个问题 - 希望我能得到一个简短的答案！
您的问题显然涉及javascript代码。请发布相关代码，并说明您使用的库。

标签： jquery webkit cross-browser

【解决方案1】：

无法找到发生这种情况的确切原因，但 webkit 浏览器（即 Chrome 和 Safari）因其富页面上的动画伪影而臭名昭著。我看到包含用于幻灯片、平滑滚动、pinterest 和 google API 的文件，以及一些用于主题支持的文件——我认为浏览器太忙于管理这些文件，无法使其 css 行为无缝。

由于您已经在使用 jquery，而不是制作导航 position: fixed;，我建议绝对定位它并使用 jquery 为其位置设置动画 - 保留 right: 9%; 并根据滚动位置。已经有一百万个插件，所以我相信你可以毫不费力地找到一个适合你的插件。从这里开始：http://www.jquery4u.com/menus/floating-message-plugins/。

【讨论】：

顺便说一句，看起来很棒的网站 - 希望你能消除其中的其余皱纹！
非常感谢您的建议和客气话。我会调查你建议的插件。

【解决方案2】：

这里是跨浏览器工作DEMOhttp://jsfiddle.net/yeyene/KBF7N/

您不需要使用任何其他插件来进行滚动导航。就这些小脚本就能给你想要的效果。

将target 属性添加到<a> 标记，并使用您要设置动画的相同DIV id 名称而不是href。

HTML

<nav>
    <ul id="Nav">
        <li><a target="home">home</a></li>
        <li><a target="about">manifesta</a></li>
        <li><a target="services">services</a></li>
        <li><a target="lookbook">lookbook</a></li>
        <li><a target="contact">contact</a></li>
    </ul>
</nav>

<div id="home">home</div>
<div id="about">manifesta</div>
<div id="services">services</div>
<div id="lookbook">lookbook</div>
<div id="contact">contact</div>

JQUERY

$(document).ready(function(){
    $('#Nav li a').on('click',function(){
        $("#Nav li").removeClass('current');
        $(this).parent('li').addClass('current');
        $('html, body').animate({ scrollTop: $('#'+$(this).attr('target')).offset().top }, 'slow'); 
    });
});

CSS

body {
    background:#ccc;
    margin: 0;
    height: 2000px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
nav {
    position: fixed;
    right: 9%;
    top: 55%
}
nav ul { 
        list-style-type:disc;
    }
    nav ul li {
        text-align: right;
        color: #fff;
        cursor:pointer;
    }
    nav ul li a{
        color: #000;
    }
    nav ul li.current {
        color:#000;
    }
#home, #about, #services, #lookbook, #contact{
    float:left;
    width:94%;
    height:600px;
    margin:20px 3%;
    background:#ccc;
    text-align:center;
    font-size:100px;
    border:3px solid #555;      
}

【讨论】：

应用上面的代码会生成 2 个导航菜单，并一起禁用导航功能。有什么想法吗？

【解决方案3】：

我找到了问题的根源。这是您在#home 中的内容滑块 (RevSlider)。如果您从 div“rev_slider revslider-initialised tp-simpleresponsive”中删除类“tp-simpleresponsive”，那么一切都开始工作 100%。这告诉我你有 JS 冲突或错误。

可能值得检查一下您是否甚至需要该课程。

【讨论】：