1

我注意到我网站上的导航在 Safari 或 Chrome 中不起作用（它在 Firefox 中运行良好）。在这两种浏览器中，它都会出现，但单击被禁用。可能是什么原因，我该如何修复？

为清楚起见，预计到达时间：*在 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;
    }
4

3 回答 3

1

这是跨浏览器工作的演示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>

查询

$(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;      
}
于 2013-06-24T08:19:13.720 回答
1

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

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

于 2013-06-21T14:04:31.107 回答
0

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

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

于 2013-06-26T21:45:48.310 回答