当你向下滚动页面时,我正试图让一堆导航堆叠在一起,直到整个页面都被填满。出于某种原因,在第三个导航中,(nav-mid-2),当我尝试设置要固定的位置时,它会向上滚动。困惑,可能只需要另一双眼睛来检查我的逻辑。如果有更好的方法,请告诉我。
$(document).ready(function(){
$(window).scroll(function(){
fadeHead();
addNav();
});
});
function addNav() {
var scrollVal = $(window).scrollTop();
console.log(scrollVal)
if(scrollVal < 756) {
$('.nav-mid-1').css({'position': 'relative', 'margin-top': '500px'});
} else if(scrollVal < 1696) {
$('.nav-mid-2').css({'position': 'relative','margin-top': '1500px'});
$('.nav-mid-1').css({'position': 'fixed', 'margin-top': '-256px'});
} else if (scrollVal < 2000){
$('.nav-mid-3').css({'position': 'relative','margin-top': '1500px'})
$('.nav-mid-2').css({'position': 'fixed', 'margin-top': '1478px'});
console.log('here')
}
}
function fadeHead() {
window_scroll = $(this).scrollTop();
$('.head-fade').css({
'opacity' : 1 - (window_scroll/300 )
})}
.main-background {
background-color: #bdc3c7;
width: 100%;
height: 100%;
position: fixed;
}
.h100 {
font-size: 3px;
}
.nav-mid-1 {
margin-top: 500px;
width: 100%;
height: 60px;
background-color: #3498db;
border: 1px solid #3498db;
}
.nav-mid-2 {
width: 100%;
height: 60px;
background-color: #f1c40f;
border: 1px solid #f1c40f;
}
.nav-mid-3 {
margin-top: 600px;
width: 100%;
height: 60px;
background-color: #ecf0f1;
border: 1px solid #ecf0f1;
}
.transition {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-background"></div>
<div class="top-nav">
<nav class="navbar navbar-inverse navbar-fixed-top"></nav>
</div>
<br>
<br>
<br>
<br>
<div class="container">
<div class="col-md-6">
<div class="head-fade">
<h1>Alo</h1>
<h2>How's it goin</h2>
<h3>Science.</h3>
<h4>Nature Man.</h4>
<h5>Linguist.</h5>
<div class='h100'>Too Small.</div>
</div>
</div>
</div>
<div class="nav-mid-1">
<h1>Welcome</h1>
</div>
<div class="nav-mid-2">
<h1>To</h1>
</div>
<div class='nav-mid-3'>
<h1>My</h1>
</div>
<div class='nav-mid-4'>
<h1>My</h1>
</div>
答案 0 :(得分:1)
当您为元素指定固定位置时,它将从页面流中移除。从而减少了页面的长度和$(window).scrolltop值。这是您的代码卡住的地方,无法运行更高的$(窗口).scrolltop值。