Липкая навигационная панель исчезает в Firefox

Question

Липкая навигационная панель исчезает в Firefox

0

Недавно я добавил "липкую" способность к навигационной панели моего сайта, используя следующий код:

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

JavaScript, ответственный за палку:

$(document).ready(function () {
    var header = $('nav').position().top;
    var navHeight = $('nav').outerHeight();

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

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

И класс.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. Есть идеи?

RaffBluffin 14 апр. 2014, в 19:27

Источник

0

Можете ли вы предоставить JSFiddle или ссылку на страницу, чтобы мы могли видеть, что происходит?
brian 14 апр. 2014, в 16:52

Теги:

javascript

jquery

html

css

nav

1 ответ

Ещё вопросы

Можете ли вы предоставить JSFiddle или ссылку на страницу, чтобы мы могли видеть, что происходит?

MarioD · Answer 1 · 2014-04-14T14-52-00.000Z

То же самое происходит с вами с моим примером? Если это так, мы можем добраться до сути.

Код + JSFiddle

http://jsfiddle.net/fbfWG/

HTML

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

CSS

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

JS

$(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');
        }
    });

});