在移动设备上禁用静态到固定导航栏脚本 [英] disable static to fixed navbar script on mobile
问题描述
我一直在为我的网站使用navbar / header。当你滚动100像素超过标志，导航栏变成固定的，坐在顶部。
I've been working on a navbar/header for my website. When you scroll 100px past the logo, the navbar changes to fixed and sits at the top.
这是很好，但在较小的视口，我不想它这样做，因为我有隐藏的标志，并且navbar永久固定在顶部。
This is all well and good, but on smaller viewports I don't want it to do this, As I have the logo hidden, and the navbar permanently fixed to the top.
问题是当你向下滚动它仍然运行脚本和隐藏导航栏，然后它重新出现。我做了一个徒劳的尝试添加display：block到css当在最大宽度为768像素，这没有做太多。我将如何在较小的视口上不运行此脚本，或者有更好的解决方案吗？
The problem is when you scroll down the it still runs the script and hides the navbar and then it reappears. I made a futile attempt of adding display: block to the css when viewed at a max-width of 768px, which didn't do much. How would I go about not running this script on smaller viewports, or is there a better solution?
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');
}
});
感谢各位！
推荐答案
编辑：更新了小提琴。这是否有帮助？
Updated the fiddle. Does this help?
这个想法是克隆您的移动视图的导航栏，并仅在小屏幕中显示它，并隐藏其他导航栏。
The idea is to clone a navigation bar for your mobile view and show it only in small screens and hide the other nav bar.
https://jsfiddle.net/6gyc6aeq/
JS
$(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;
}
}
这篇关于在移动设备上禁用静态到固定导航栏脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
