我正在为自己建立一个网站,我发现这对导航栏位于图像下方的多个网站上的效果非常好,但是当您滚动浏览它时,它会粘在顶部。
我怎样才能做到这一点?另外,如何实现与this website with a similar navbar style上的效果相似的效果?
答案 0 :(得分:10)
这是@Matthew所说的:
var num = 200; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
希望它有所帮助,我使用了bootstrap navbar。
答案 1 :(得分:0)
以下是一些例子
使用引导程序,您可以使用navbar-fixed-top
类。
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
...
</div>
</nav>
查看以下链接:
固定到顶部:http://getbootstrap.com/components/#navbar-fixed-top
修复了Navbar示例:http://getbootstrap.com/examples/navbar-fixed-top/
答案 2 :(得分:0)
这是一个Bootstrap示例,一旦用户滚过顶部标题,就会将导航栏附加到顶部..
这是另一个使用CSS transition
答案 3 :(得分:0)
这是一个真实的quick example我和jquery以及一些非常简单的css一起投掷。
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
.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
<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>
答案 4 :(得分:0)
以下是粘性导航栏On-Scroll的示例,其中包含动态高度
这是小提琴链接 - 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');
}
});
});
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;
}
<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>
答案 5 :(得分:0)
对于 jQuery 用户,请查看:
var yourNavigation = $(".nav");
stickyDiv = "sticky";
yourHeader = $('.header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > yourHeader ) {
yourNavigation.addClass(stickyDiv);
} else {
yourNavigation.removeClass(stickyDiv);
}
});
/* google font */
body {
text-align:center;
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
color:rgba(0,0,0,0.87);
}
.header {
width:100%;
height:100px;
font-size:50px;
line-height:100px;
text-transform:uppercase;
font-weight:bold;
}
.nav {
width:100%;
height:60px;
font-size:20px;
line-height:60px;
background:#ff5252;
color:#fff;
position:relative;
margin-bottom:60px;
z-index:3;
text-transform:uppercase;
}
.content {
width:640px;
height:500vh;
font-size:14px;
padding-top:100px;
margin:0 auto 0;
}
.sticky {
position:fixed;
top:0;
}
p {
line-height:2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="sticky.js"></script>
<link rel="stylesheet" type="text/css" href="sticky.css">
<body>
<header class='header'>Header</header>
<div class='nav'>Navigation</div>
<div class='content'>
<h1>Simple sticky navigation bar</h1>
<p>Using jQuery we add (or remove) a sticky class to the navigation bar. The sticky class fixes the position.
</p>
<p>This happens whenever the page is scrolled. We check to see how far down the page has scrolled, if this
number is greater than the height of the header, we add the sticky class to the navigation.</p>
<p>You can already achieve this effect using only CSS with <b>position: sticky;</b> but it's not supported by
many browsers at the moment.</p>
</div>
</body>