我找到了这段代码。
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
/*
Tutorial Name: Scroll To Top Then Fixed Navigation Effect With JQuery and CSS
Description: Create a sticky navigation bar that remains fixed to the top after scroll
Author: Stanislav Kostadinov
Author URI: http://stanislav.it
Version: 1.0.0 - 11.01.2014
*/
* {margin: 0; padding: 0;}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
body {
color: #fff;
font-family: 'open-sans-bold';
font-size: 18px;
text-align: center;
}
/* Font Face Settings */
@font-face {
font-family: 'open-sans-bold';
src: url('../fonts/open-sans/OpenSans-Bold.eot');
src: url('../fonts/open-sans/OpenSans-Bold.eot?iefix') format('embedded-opentype'),
url('../fonts/open-sans/OpenSans-Bold.ttf');
font-weight: normal;
}
/* Navigation Settings */
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: #fff;
}
nav li {
display: inline-block;
padding: 24px 10px;
}
nav li a {
color: #757575;
text-transform: uppercase;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #43b29d;
}
#screen1 p {
padding-top: 200px;
}
#screen2 {
background: #efc94d;
}
#screen3 {
background: #e1793d;
}
@media only screen and (max-width: 520px) {
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 14px;
}
}
<section id="screen1">
<p>Scroll down</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
这是一个工作示例。 http://stanhub.com/tutorials/sticky-navigation/
它是一个粘性菜单并且运行良好,但问题是它只有在页面完全向下滚动时才会粘住。 nav div 向下滚动 40px 后是否可以修复它?可以说它在导航框和顶部浏览器之间有 40 像素。
最佳答案
是的,改变代码中的一个变量 var navHeight = $( window ).height() - 70;
到 var navHeight = $( window ).height() - 40;
这应该可以解决指定高度的问题
关于javascript - 修复了 div 上的导航效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35879028/