jQuery 粘性导航栏 onScroll？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22541364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-27 01:58:28 来源:igfitidea点击:
Sticky NavBar onScroll?
提问by Kevin Haube
I'm currently building a site for myself, and I found this really awesome effect on multiple sites where the navbar is below an image, but when you scroll past it, it sticks to the top.
我目前正在为自己构建一个网站，我发现在导航栏位于图像下方的多个网站上，这种效果非常棒，但是当您滚动浏览它时，它会停留在顶部。
How can I achieve this? Also, how can I achieve an effect similar to the one on this website with a similar navbar style?
我怎样才能做到这一点？另外，我怎样才能实现与本网站上具有类似导航栏样式的效果类似的效果？
回答by Mattos
Here is what @Matthew was talking about:
这是@Matthew 在谈论的内容：
Check this fiddle http://jsfiddle.net/luckmattos/yp8HK/1/
检查这个小提琴http://jsfiddle.net/luckmattos/yp8HK/1/
JQUERY
查询
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
Hope it helps, I used bootstrap navbar.
希望它有所帮助，我使用了引导程序导航栏。
回答by Santosh Joshi
Here are some few examples
这里有一些例子
With in bootstrap you can use navbar-fixed-topclass.
在引导程序中，您可以使用navbar-fixed-top类。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
Have a look at following links:
看看以下链接：
Fixed to Top : http://getbootstrap.com/components/#navbar-fixed-top
固定到顶部：http: //getbootstrap.com/components/#navbar-fixed-top
Fixed Navbar example : http://getbootstrap.com/examples/navbar-fixed-top/
回答by Zim
Here's a Bootstrap example that attaches the navbar to the top once the user has scrolled past the top header..
这是一个 Bootstrap 示例，一旦用户滚动过顶部标题，它就会将导航栏附加到顶部。
Here is another example that is animates the attaching of the navbar using CSS transition
这是另一个使用 CSS 动画附加导航栏的示例 transition
回答by Matthew Nie
Here is a REAL quick exampleI threw together with jquery and some very simple css.
这是我与 jquery 和一些非常简单的 css 结合在一起的一个真正的快速示例。
JS
JS
$(window).on('scroll', function(){
if($(window).scrollTop()>=95 && !$('nav').hasClass('fixed')){
$('nav').addClass('fixed');
}
else if($(window).scrollTop()<95 && $('nav').hasClass('fixed')){
$('nav').removeClass('fixed')
}
});
CSS
CSS
.container {
height: 1800px;
}
.header {
text-align: center;
}
nav {
background-color: #efefef;
border-top: 2px solid #666;
border-bottom: 2px solid #666;
padding: 15px;
width: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
HTML
HTML
<div class="container">
<div class="header">
<img src="http://www.placehold.it/500x85" alt="" />
<nav role='navigation'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
回答by Pawan Singh Bisht
Here is an example of sticky navigation bar On-Scroll with dynamic height getting
这是一个带有动态高度获取的粘性导航栏 On-Scroll 的示例
JS
JS
您需要先添加一个 jQuery 库文件。Here is fiddle link- https://jsfiddle.net/CV_pawan/4nr4codq/1/
这是小提琴链接 - https://jsfiddle.net/CV_pawan/4nr4codq/1/
$(document).ready(function(){
var num = $(".header-class").offset().top;
$(window).bind('scroll', function() {
if ($(window).scrollTop() > num) {
$('.header-class').addClass('fixed');
}
else {
$('.header-class').removeClass('fixed');
}
});
});
CSS
CSS
body {
margin: 0px;
padding: 0px;
}
.nav-bar-white {
background-color: #125456;
width: 100%;
}
.active-2 {
float: right;
width: 49%;
text-align: right;
}
.fixed {
position: fixed;
width: 100%;
top: 0;
}
h3 {
color: #fff;
}
.first {
background: #000;
width: 49%;
display: inline-block;
margin: 0px;
padding: 0px;
border: 1px solid #fff;
}
.first p {
color: #fff;
}
.second {
background: #000;
width: 49%;
display: inline-block;
margin: 0px;
padding: 0px;
border: 1px solid #fff;
}
.second p {
color: #fff;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #300E06;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #000;
}
HTML
HTML
<ul class="nav-bar-white">
<li class="active-1"><a href="#home">Company Logo</a></li>
</ul>
<ul class="header-class">
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div>
<div class="first">
<h3>
What is Lorem Ipsum?
</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
<div class="second">
<h3>
What is Lorem Ipsum?
</h3>
<p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
</div>
<div class="first">
<h3>
What is Lorem Ipsum?
</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
<div class="second">
<h3>
What is Lorem Ipsum?
</h3>
<p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum
</p>
</p>
</div>
</div>
