我的导航栏向下滚动,但在向上滚动时不会停在原始位置。我看到另外一篇文章解决了类似的问题,但我无法以纠正我的问题的方式应用它,因为我对此非常陌生。最初导航栏完全不起作用,但是通过堆栈溢出这里的大量阅读我能够让它运行一半。希望你们可以解决我的问题大声笑,无论如何,感谢提前阅读。
适用的CSS -
nav {
z-index: 500;
background-color: #e7ecf2;
}
.nav-placeholder {
margin: 0 0 20px 0;
}
.fixed {
position: fixed;
top: 5px;
left: 0;
width: 100%;
background-color: transparent;
}
.fixed .nav-inner {
max-width: 700px;
margin: 0 auto;
background-color:transparent;
}
适用的JQuery -
$(document).ready(function() {
var navOFFset = $("nav").offset().top;
$("nav").wrap('<div class="nav-placeholder"></div>');
$(".nav-placeholder").height($("nav").outerHeight());
$("nav").wrapInner('<div class="nav-inner"></div>');
$(window).scroll(function() {
var scrollPos=$(window).scrollTop();
if (scrollPos => navOffset) {
$("nav").addClass("fixed");
} else {
$("nav").removeClass("fixed");
}
});
});
适用的HTML -
<nav class="row wrapme container-fluid"><div class="nav-placeholder">
<div class="nav-inner"><div class="col-sm-3">
<button class="btn btn-block target">About Me</button></div>
<div class="col-sm-3"> <button class="btn btn-block target" id="target2">Portfolio</button></div>
<div class="col-sm-3"> <button class="btn btn-block target" id="target3">Contact</button></div>
<div class="col-sm-3"><button class="btn btn-block target" id="target3">Links</button></div>
</div> </div></nav>