Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/463.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Firefox中粘性导航栏消失_Javascript_Jquery_Html_Css_Nav - Fatal编程技术网

Javascript Firefox中粘性导航栏消失

Javascript Firefox中粘性导航栏消失,javascript,jquery,html,css,nav,Javascript,Jquery,Html,Css,Nav,我最近使用以下代码将“粘性”功能添加到网站的导航栏中: <nav> <div class="menu-navigation-container"> <ul class="menu" id="menu-navigation"> <li class="menu-item" id="menu-item-50"><a href="#">BlahBlah</a></li>

我最近使用以下代码将“粘性”功能添加到网站的导航栏中:

<nav>
    <div class="menu-navigation-container">
        <ul class="menu" id="menu-navigation">
            <li class="menu-item" id="menu-item-50"><a href="#">BlahBlah</a></li>
            <li class="menu-item" id="menu-item-51"><a href="#">BlahBlah</a></li>
            <li class="menu-item" id="menu-item-49"><a href="#">BlahBlah</a></li>
            <li class="menu-item" id="menu-item-48"><a href="#">BlahBlah</a></li>
            <li class="menu-item" id="menu-item-47"><a href="#">BlahBlah</a></li>
        </ul>
    </div>            
</nav>
和.sticky CSS类:

.fixed {
    -webkit-box-shadow: 0 4px 10px -3px #000;
    -moz-box-shadow: 0 4px 10px -3px #000;
    -o-box-shadow: 0 4px 10px -3px #000;
    box-shadow: 0 4px 10px -3px #000;
    position: fixed !important;
}

它在Chrome、Safari和IE上工作得非常好,但由于某些原因,当它到达Firefox窗口顶部时,导航栏完全消失。有什么想法吗?

我的例子中你也有同样的想法吗?如果是这样的话,我们可以追根究底

代码+JSFiddle

HTML JS
你能提供一个JSFiddle或一个指向页面的链接,让我们看看发生了什么吗?
.fixed {
    -webkit-box-shadow: 0 4px 10px -3px #000;
    -moz-box-shadow: 0 4px 10px -3px #000;
    -o-box-shadow: 0 4px 10px -3px #000;
    box-shadow: 0 4px 10px -3px #000;
    position: fixed !important;
}
<nav>
    <div class="menu-navigation-container">
        <ul class="menu" id="menu-navigation">
            <li class="menu-item" id="menu-item-50"><a href="#">BlahBlah</a>

            </li>
            <li class="menu-item" id="menu-item-51"><a href="#">BlahBlah</a>

            </li>
            <li class="menu-item" id="menu-item-49"><a href="#">BlahBlah</a>

            </li>
            <li class="menu-item" id="menu-item-48"><a href="#">BlahBlah</a>

            </li>
            <li class="menu-item" id="menu-item-47"><a href="#">BlahBlah</a>

            </li>
        </ul>
    </div>
</nav>
body {
    height:2000px;
    margin:100px 0 0 0;
    padding:0;
}
nav {
    padding:10px;
    background:red;
    width:100%;
}
a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
ul li {
    display:inline-block;
    margin-right:10px;
}
.fixed {
    position: fixed;
    top:0;
    left:0;
    width:100%;
}
/* apply a natural box layout model to all elements */
 *, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
$(document).ready(function () {
    var header = $('nav').offset().top;
    var navHeight = $('nav').outerHeight();

    $(window).scroll(function () {
        var windowpos = $(window).scrollTop();

        if (windowpos > header) {
            $('nav').addClass('fixed').next().css('margin-top', navHeight + 'px');
        } else {
            $('nav').removeClass('fixed').next().css('margin-top', '0');
        }
    });

});