如何创建滚动后固定在顶部的粘性导航栏 [英] How to create a sticky navigation bar that becomes fixed to the top after scrolling
问题描述
我正在尝试制作一个导航栏，该导航栏在网站首次加载时出现在可查看页面的底部，然后当用户向下滚动时，导航栏会向上滚动，并最终固定在顶部.我正在使用 Bootstrap，就像这个网站一样，但我不知道这个网站是如何做到的.有什么帮助吗?
这是我试图模拟的带有导航栏的网站:http://www.blastprocessor.co.uk/
这是我的导航 html 和 css 代码:
HTML:
这里是 CSS...
html, body {高度:4000px；}.navbar 固定 {顶部:0；z-索引:100；位置:固定；宽度:100%；}#body_div {顶部:0；位置:相对；高度:200px；背景颜色:绿色；}#横幅 {宽度:100%；高度:273px；背景颜色:灰色；溢出:隐藏；}#nav_bar {边框:0；背景色:#202020；边界半径:0px；底边距:0；高度:30px；}//以下css用于链接，粘性导航不需要.nav_links {边距:0；}.nav_links li {显示:内联块；边距顶部:4px；}.nav_links li a {填充:0 15.5px；颜色:#3498db；文字装饰:无；}现在，只需添加 javacript 即可根据滚动位置添加和删除修复类.
$(document).ready(function() {//改变下面的整数以匹配你上面的div的高度，我称之为//横幅.只需在最后一个数字上加一个 1.控制台.log($(window).scrollTop())//确定您想要修复导航时的滚动位置//bar 或 div 或其他.我为你停留在 console.log 中.删除时//你知道位置.$(窗口).滚动(功能(){console.log($(window).scrollTop());如果 ($(window).scrollTop() > 550) {$('#nav_bar').addClass('navbar-fixed-top');}如果 ($(window).scrollTop() <551) {$('#nav_bar').removeClass('navbar-fixed-top');}});});I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?
Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/
Here's my navigation html and css code:
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 -->
And here's my 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;}
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript.
Here is the JSFiddle to play around with... http://jsfiddle.net/CriddleCraddle/Wj9dD/
The solution is very similar to other solutions on the web and StackOverflow. If you do not find this one useful, search for what you need. Goodluck!
Here is the 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>
Here is the 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;
}
Now, just add the javacript to add and remove the fix class based on the scroll position.
$(document).ready(function() {
//change the integers below to match the height of your upper div, 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');
}
});
});
这篇关于如何创建滚动后固定在顶部的粘性导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
