我正在尝试创建一个导航栏，该导航栏在滚动后会固定在屏幕顶部。我遵循了两个不同的教程，但我似乎无法使它们中的任何一个正常工作。
first教程根本不会粘在屏幕顶部。 second教程确实会粘在屏幕顶部，但如果您向下滚动得足够远，直到它粘在顶部后您才能看到导航。
这就是我现在所拥有的(在第一个教程之后):
var n = $("#nav-bar");
ns = "nav-bar-scrolled";
hdr = $('#nav-bar').offset().top;
$(window).scroll(function(){
if($(this).scrollTop() > hdr){
n.addClass(ns);
}else{
n.removeClass(ns);
}
});
这是第二个教程之后的JS代码:
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('header').height();
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#nav-bar').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block'); //this doesn't do anything
} else {
$('#nav-bar').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none'); //this doesn't do anything
}
});
});
完整代码在这里:https://jsfiddle.net/linahsie/rhp65j2b/2/ 谢谢!
最佳答案
在您的 JS 中，n 应该是 #nav-bar，ns(因为您正在切换一个类)应该是 nav-bar-scrolled 和 hdr 应该是页眉的底部位置，因为这是您希望导航将自身附加到窗口顶部的位置。然后在您的 CSS 中，您希望使用 #nav-bar.nav-bar-scrolled 作为固定菜单的选择器，以匹配您在 JS 中所做的更改。
var n = $("#nav-bar");
ns = "nav-bar-scrolled";
hdr = $('header').offset().top + $('header').outerHeight();
$(window).scroll(function(){
if($(this).scrollTop() > hdr){
n.addClass(ns);
}else{
n.removeClass(ns);
}
});
/*
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('header').height();
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('nav').css({position: 'fixed', top: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('nav').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
*/
/*
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('nav').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('nav').css({
position: 'fixed',
top: '0px'
});
$('#about').css('margin-top', $('nav').outerHeight(true) + parseInt($('header').css('marginBottom')));
} else {
$('nav').css({
position: 'static',
top: '0px'
});
$('#about').css('margin-top', '0px');
}
});
});
*/*{
margin: 0;
padding: 0;
}
.container{
margin-right: auto;
margin-left: auto;
width: 1000px;
}
header{
height: 100vh;
background: #f07057;
}
#after-header{
padding-top: 100vh;
}
#nav-bar,
#about,
#a2{
position: relative;
}
#header-content{
position: absolute;
top: 50%;
left: 50%;
}
#nav-bar{
height: 75px;
font-family: 'Montserrat';
background-color: #FFE77C;
z-index: 150;
width: 100%;
}
header{
position: fixed;
width: 100%;
}
#nav-bar.nav-bar-scrolled{
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#nav-bar h1{
padding-top: 10px;
font-size: 270%;
text-align: center;
float: left;
}
#nav-list{
float: right;
}
.dir{
float: left;
padding-top: 25px;
text-decoration:none;
padding-left: 15px;
}
#about{
height: 100vh;
background-color: antiquewhite;
}
#a2{
height: 100vh;
background-color: beige;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<div id="header-content">
<h1>Text Here</h1>
</div> <!--header-content-->
</header>
<div id="after-header">
<nav id="nav-bar">
<div class="container">
<h1>Nav Bar</h1>
</div> <!--container-->
</nav> <!--nav-->
<div id="about">
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</div> <!--end of about-->
<div id="a2">
<div class="container">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
</div>
</div> <!--end of after-header-->
</body>关于javascript - 粘性导航栏不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41560216/