响应时导航栏固定在顶部

Question

所以，这是我到目前为止所做的，我的菜单在响应时固定在顶部，但是一旦我开始向下滚动它就会消失，当我回到全屏菜单时也会保持固定。我需要帮助我的js代码

   $(window).resize(function() {
        var w = $(window).width();
         menu = $('nav');
        if (w < 480) {
            menu.addClass('navbar-fixed-top');
        }
    });
     
});

$(function() {
    var pull        = $('#pull');
        menu        = $('nav ul');
        menuHeight  = menu.height();
 
    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });
    
    $(window).resize(function(){
    var w = $(window).width();
    if(w > 480 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
});
});

.navbar-default{
    background-color: #b104aa;
    border: none;
    border-radius: 0;
    max-width: 100%;
    height: 45px;
    margin-bottom: 0;
}
.navbar-default .navbar-nav>li>a{
    color: #ffffff;
    font-weight: 300;
    font-size: 20px;
    margin-left: 50px;
}
.navbar-default .navbar-nav>li>a:hover{
    background-color: #8a0284;
    color: #ffffff;
}
ul.nav.navbar-nav li:first-of-type{
    margin-left: -50px;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}


@media screen and (max-width: 480px){
    .navbar-default .navbar-nav>li>a{
        color: #ffffff;
        font-weight: 300;
        font-size: 20px;
        margin-left: 0px;
        z-index: 10;
        background-color: #b104aa;
        width: 100%;
    }
    ul.nav.navbar-nav li:first-of-type{
    margin-left: 0px;
    width: 100%;
}
 nav div#pull {
        display: block;
        background-color: #b104aa;
        width: 100%;
        position: relative;
        z-index: 10;
        color: #ffffff;
        font-size: 15px;
        font-weight: 700;
        margin-top: 0;
    }
    nav div#pull:after {
        content:"";
        background: url('nav-icon.png') no-repeat;
        width: 30px;
        height: 30px;
        display: inline-block;
    }
}

 <nav class="navbar navbar-default clearfix">
                <div class="container">
                    <ul class="nav navbar-nav clearfix">
                        <li><a href="#home">Kategorija 1</a></li>
                        <li><a href="#home">Kategorija 2</a></li>
                        <li><a href="#home">Kategorija 3</a></li>
                        <li><a href="#home">Kategorija 4</a></li>
                        <li><a href="#home">Kategorija 5</a></li>
                        <li><a href="#home">Kategorija 6</a></li>
                    </ul> 
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#search"><span class="glyphicon glyphicon-search"></span></a></li>
                    </ul>
                    <div id="pull">Menu</div>
                </div>
            </nav>

Answer 1

如果你只是想让导航栏保持固定，你需要添加类.navbar-fixed-top：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>