navbar在响应时固定到顶部

所以，这是我迄今为止所做的，当我的菜单被响应时固定到顶部，但是一旦我开始向下滚动它就会消失，并且当我回到全屏时菜单保持fixed.I需要帮助，我的js代码navbar在响应时固定到顶部

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

来源

2016-03-13 purpulerain

您是否尝试过[mediaquery]（https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）或特定的'@media（max-width：600px）' – Zamboney

我有mediaquery for 480像素，它是固定的，当我调整大小，但当我点击菜单拉起它的消除者 – purpulerain

，所以你想拉上点击只在移动（又名480px宽度） – Zamboney

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

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

来源

2016-03-13 11:19:02

我不希望它被修复时，它不响应。 – purpulerain

navbar在响应时固定到顶部

回答

相关问题