如何创build一个粘滞的导航栏，滚动后变成固定的顶部
我试图在第一次加载网站时在可见页面的底部创build一个导航栏，然后当用户向下滚动时，导航栏向上滚动，最终变成固定在顶部。 我正在使用Bootstrap，就像这个网站，但我无法弄清楚这个网站是如何做到的。 任何帮助？
这里是我想要模拟导航栏的网站： http : //www.blastprocessor.co.uk/
这是我的导航HTML和CSS代码：
HTML：
<div class="navbar navbar-fixed-top" id="navbar"> <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse"> <ul class="nav nav-pills"> <li class="active"><a href="#home">Home</a></li> <li><a href="#service-link">Services</a></li> <li><a href="#contact-link">Contact</a></li> </ul><!-- /.nav --> </div><!--/.nav-collapse --> </div><!-- /.container --> </div><!-- /.navbar-inner --> </div><!-- /.navbar --> 这是我的CSS：
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;} .navbar .nav > li a{ color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em; } .navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a { color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em; } .navbar .nav > li {padding:2em;} .navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);} .navbar .nav, .navbar .nav > li { float:none; display:inline-block; *display:inline; /* ie7 fix */ *zoom:1; /* hasLayout ie7 trigger */ vertical-align: top; padding:0 2em; } .navbar-inner {text-align:center;} .navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
我正在寻找这个同样的东西。 我已经读过，这在Bootstrap 3.0中是可用的，但是我实际上并没有运气。 这是我想出来的，它的效果很好。 非常简单的jQuery和Javascript。
这里是JSFiddle玩… http://jsfiddle.net/CriddleCraddle/Wj9dD/
该解决scheme与Web和StackOverflow上的其他解决scheme非常相似。 如果你没有find这个有用的东西，search你所需要的。 祝你好运！
这里是HTML …
<div id="banner"> <h2>put what you want here</h2> <p>just adjust javascript size to match this window</p> </div> <nav id='nav_bar'> <ul class='nav_links'> <li><a href="url">Sign In</a></li> <li><a href="url">Blog</a></li> <li><a href="url">About</a></li> </ul> </nav> <div id='body_div'> <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p> </div>
这是CSS …
html, body { height: 4000px; } .navbar-fixed { top: 0; z-index: 100; position: fixed; width: 100%; } #body_div { top: 0; position: relative; height: 200px; background-color: green; } #banner { width: 100%; height: 273px; background-color: gray; overflow: hidden; } #nav_bar { border: 0; background-color: #202020; border-radius: 0px; margin-bottom: 0; height: 30px; } //the below css are for the links, not needed for sticky nav .nav_links { margin: 0; } .nav_links li { display: inline-block; margin-top: 4px; } .nav_links li a { padding: 0 15.5px; color: #3498db; text-decoration: none; }
现在，只需添加javacript添加和删除基于滚动位置的修复类。
$(document).ready(function() { //change the integers below to match the height of your upper dive, which I called //banner. Just add a 1 to the last number. console.log($(window).scrollTop()) //to figure out what the scroll position is when exactly you want to fix the nav //bar or div or whatever. I stuck in the console.log for you. Just remove when //you know the position. $(window).scroll(function () { console.log($(window).scrollTop()); if ($(window).scrollTop() > 550) { $('#nav_bar').addClass('navbar-fixed-top'); } if ($(window).scrollTop() < 551) { $('#nav_bar').removeClass('navbar-fixed-top'); } }); });
注意（2015）：下面的问题和答案都适用于Twitter Bootstrap的旧的，弃用的2.x版本 。
Twitter的Bootstrap内置了这个制作和元素“粘性”的function，它被称为Affix 。 你所要做的就是补充：
<div data-spy="affix" data-offset-top="121"> ... your navbar ... </div>
围绕您的标记，不要忘记加载Bootstrap的JS文件，如手册中所述。 数据属性offset-top告诉页面有多less像素滚动（从顶部）来修复菜单组件。 通常这只是页面顶部的空间。
注意：菜单将被修复时，您将必须注意缺失的空间。 固定意味着将其从您的页面图层中切出并粘贴到不滚动的不同图层中。 我正在做以下事情：
<div style="height: 77px;"> <div data-spy="affix" data-offset-top="121"> <div style="position: relative; height: 0; width: 100%;"> <div style="position: absolute; top: 0; left: 0;"> ... my menu ... </div> </div> </div> </div>
其中77px是我贴的组件的高度。
这是一个Bootstrap 3的例子，不需要额外的jQuery ..它使用Bootstrap 3中包含的Affix插件，但导航栏标记已经改变，因为BS2 …
<!-- Content Above Nav --> <header class="masthead"> </header> <!-- Begin Navbar --> <div id="nav"> <div class="navbar navbar-default navbar-static"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> <span class="glyphicon glyphicon-bar"></span> </a> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="divider"></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <ul class="nav pull-right navbar-nav"> <li> .. </li> <li> .. </li> </ul> </div> </div> </div><!-- /.navbar --> </div>
工作演示/模板： http ： //bootply.com/69848
//在html中
<nav class="navbar navbar-default" id="mainnav"> <nav>
//添加jquery
$(document).ready(function() { var navpos = $('#mainnav').offset(); console.log(navpos.top); $(window).bind('scroll', function() { if ($(window).scrollTop() > navpos.top) { $('#mainnav').addClass('navbar-fixed-top'); } else { $('#mainnav').removeClass('navbar-fixed-top'); } }); });
这里是jsfiddle玩耍： – http://jsfiddle.net/shubhampatwa/46ovg69z/
编辑：如果你想只适用于移动设备的这个代码，你可以使用：
var newWindowWidth = $(window).width(); if (newWindowWidth < 481) { //Place code inside it... }
这对我很好。 不要忘记在导航栏所在的位置放一个填充div，否则内容每次固定/不固定都会跳转。
function setSkrollr(){ var objDistance = $navbar.offset().top; $(window).scroll(function() { var myDistance = $(window).scrollTop(); if (myDistance > objDistance){ $navbar.addClass('navbar-fixed-top'); } if (objDistance > myDistance){ $navbar.removeClass('navbar-fixed-top'); } }); }
使用Bootstrap词缀：
/* Note: Try to remove the following lines to see the effect of CSS positioning */ .affix { top: 0; width: 100%; } .affix + .container-fluid { padding-top: 70px; }
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;"> <h1>Bootstrap Affix Example</h1> <h3>Fixed (sticky) navbar on scroll</h3> <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p> <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Basic Topnav</a></li> <li><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </nav> <div class="container-fluid" style="height:1000px"> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> <h1>Some text to enable scrolling</h1> </div> </body> </html>
你可以使用position: sticky
#navbar { position: sticky; top: 0px; }
#navbar应该是身体的直接孩子。
回答Shubham Patwa：这样，当“navbar-fixed-top”类适用时，页面就会“跳动”。 这是因为#mainnav是在文档的DOMstream程中进出。 如果页面具有“临界高度”，则在固定和未固定的#mainnav位置之间跳转，这可能导致丑陋的UX。
我改变了这种方式的代码，这似乎工作正常（不是像素完美，但罚款）：
$(document).ready(function() { var navpos = $('#mainnav').offset(); var navheight = $('#mainnav').outerHeight(); $(window).bind('scroll', function() { if ($(window).scrollTop() > navpos.top) { $('#mainnav').addClass('navbar-fixed-top'); $('body').css('marginTop',navheight); } else { $('#mainnav').removeClass('navbar-fixed-top'); $('body').css('marginTop','0'); } });
我发现这个简单的JavaScript代码非常有用。
$(document).ready(function() { var navbar = $('#navbar'); navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>'); var afternavbar = $('#more-div'); var abovenavbar = $('#above-navbar'); $(window).on('scroll', function() { if ($(window).scrollTop() > abovenavbar.height()) { navbar.addClass('navbar-fixed-top'); afternavbar.removeClass('hidden'); } else { navbar.removeClass('navbar-fixed-top'); afternavbar.addClass('hidden'); } }); });
