在手机上禁用静态固定导航栏脚本

我一直在为我的网站开发导航栏/标题。当滚动100px超过徽标时，导航栏变为固定并位于顶部。在手机上禁用静态固定导航栏脚本

这一切都很好，但在较小的视口上，我不希望它做到这一点，因为我隐藏了标志，导航栏永久固定在顶部。

问题是，当你向下滚动它仍然运行脚本并隐藏导航栏，然后它重新出现。当我以768px的最大宽度查看时，我做了一个徒劳无益的尝试，将display：block添加到了css中，这并没有太大的帮助。我怎么会不在较小的视口上运行这个脚本，或者有更好的解决方案？

Here's a jsfiddle, try it in mobile view and scroll down.

这里是我与

$(window).scroll(function() { 
    var nav = $('#custom-bootstrap-menu'); 
    var body = $('body'); 
    var top = 100; 
    var logo = $('div#navlogo'); 
    if ($(window).scrollTop() >= top) { 

     nav.addClass('navbar-fixed-top'); 
     body.addClass('padding-fifty'); 
     logo.css('display', 'block'); 

    } else { 
     nav.removeClass('navbar-fixed-top'); 
     body.removeClass('padding-fifty'); 
     logo.css('display', 'none'); 

    } 
});

谢谢你们工作的代码！

来源

2015-10-12 Jalapeno Jack

编辑：更新小提琴。这有帮助吗？

这个想法是为您的移动视图克隆一个导航栏，并只显示在小屏幕上，并隐藏其他导航栏。

https://jsfiddle.net/6gyc6aeq/

$(window).scroll(function() { 
var nav = $('#custom-bootstrap-menu'); 
var body = $('body'); 
var top = 100; 
var logo = $('div#navlogo'); 
if ($(window).scrollTop() >= top) { 

    nav.addClass('navbar-fixed-top'); 
    body.addClass('padding-fifty'); 


} else { 
    nav.removeClass('navbar-fixed-top'); 
    body.removeClass('padding-fifty'); 


} 
}); 

$("#mobile-only").html($("#custom-bootstrap-menu").html());

HTML

<body> 

<div id="logo"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h1>CHEEZ-IT</h1> 
     </div> 
     <div class="col-md-6"> 

     </div> 
    </div> 
    </div> 
</div>  





<!-- Static navbar --> 
<nav id="custom-bootstrap-menu" class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <div id="navlogo">    
     <a class="navbar-brand" href="#">CHEEZ-IT!</a> 
     </div> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Who are Cheez-it's</a></li> 
      <li><a href="#">Credentials</a></li> 
      </ul> 
     </li> 
     <li><a href="#contact">Our Services</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Industries <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Cheeze-it Solar</a></li> 
      <li><a href="#">Cheeze-it Infrastructure</a></li> 
      <li><a href="#">Cheeze-it Harvest</a></li>     
      </ul> 
     </li> 

     <li><a href="#contact">Partners</a></li> 
     <li><a href="#contact">Contact</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</nav> 
<nav id="mobile-only" class="navbar navbar-default navbar-fixed-top"> 

</nav> 


<div class="container"> 
<div class="row"> 
    <div class="col-md-12"> 

     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2>    
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND</h2> 
     <h2>CONTENT IS GRAND, MAN</h2> 


    </div> 
</div>

CSS

#logo { 
height: 100px; 
} 

.padding-fifty { 
    padding-top: 50px; 
} 

.navbar-static-top #navlogo { 
    display: none; 
} 

#custom-bootstrap-menu{ 
    display :block; 
} 
    #mobile-only{ 
     display:none; 
    } 

#custom-bootstrap-menu.navbar-fixed-top #navlogo{ 
     display:block; 
} 

@media only screen and (max-width: 768px) { 
body{ 
padding-top: 50px; 

} 

#logo { 
display: none; 
} 

#navlogo { 
display: block; 
} 
#custom-bootstrap-menu{ 
    display :none; 
} 
#mobile-only{ 
     display:block; 
    } 





}

来源

2015-10-12 10:13:00

我喜欢你在这里做什么，但净资产值已不再固定在顶部时，在移动 –

你有任何其他的想法？ –

perfecto！谢谢堆队友 –

在手机上禁用静态固定导航栏脚本

回答

相关问题