当您向下滚动页面 100px 时,我的导航栏不会固定在顶部。然后当向上滚动时,它会恢复到正常状态。
我已经设法让导航栏在滚动时变得固定和不固定,但它不在正确的位置。它固定在页面下方并向左移动,而不是固定在顶部并向右浮动。
这是我在 jsfiddle 上制作的示例供您查看。
<div id="wrapper">
<div id="codeback">
</div>
<div id="container">
<div class="nav">
</div>
<div id="wrap">
</div>
</div><!-- END OF CONTAINER -->
</div>
body{
background-color:black;
}
#wrapper{
width:100%;
height:inherit;
}
#codeback{
width:100%;
height:100%;
background-image:url('capture.jpg');
background-repeat: no-repeat;
position:fixed;
left:0px;
top:0px;
z-index:-1;
}
#container{
width:100%;
float:right;
}
.nav{
margin-top:100px;
width:80%;
height:50px;
float:right;
background-color:blue;
position:relative;
}
#wrap{
float:right;
width:80%;
height:1500px;
background-color:white;
}
$(window).scroll(function (e) {
$el = $('.nav');
if ($(this).scrollTop() > 100 && $el.css('position') != 'fixed') {
$('.nav').css({ 'position': 'fixed', 'top': '0'});
}
if ($(this).scrollTop() < 100 && $el.css('position') == 'fixed') {
$('.nav').css({ 'position': 'relative'});
}
});
最佳答案
你可以通过类轻松做到这一点...
$(window).scroll(function (e) {
$el = $('.nav');
if ($(this).scrollTop() > 100) {
$('.nav').addClass("fixedNav");
}else {
$('.nav').removeClass("fixedNav");
}
});
.fixedNav {
position:fixed;
margin:0;
width:100%;
}
这里是 fiddle :http://jsfiddle.net/yss9hz0v/
关于javascript - JQUERY:为什么向下滚动时我的导航栏不固定在顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25764375/