HTML

Question

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

为了清晰起见，ETA： *在Chrome中，菜单将加载，您可以单击，但页面不会滚动到该部分，如果手动滚动，菜单也不会跟随。此外，光盘不会出现在左侧。在Safari中，菜单与光盘一样显示，但点击完全禁用，如下面的滚动。

另外，我确定这不是我的机器所独有的，因为它是另一个引起我注意这些问题的人（即 - 这个问题已由两个不同的用户在两台不同的机器上显示*

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;
    }

Answer 1

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

由于你已经在使用jquery，而不是使用导航position: fixed;我建议绝对定位它并使用jquery来设置其位置动画 - 保持right: 9%;并使top:成为基于滚动位置的显式像素距离。已经有一百万个插件，所以我相信你可以找到一个适合你的插件而不需要太多努力。从这里开始：http://www.jquery4u.com/menus/floating-message-plugins/。

Answer 2

以下是跨浏览器工作的DEMO http://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;      
}

Answer 3

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

可能值得检查一下你是否需要那门课。

jquery导航无法在webkit浏览器中运行

3 个答案:

HTML

JQUERY

CSS