如果基于滚动位置的声明不起作用
问题描述:
当滚动蓝色部分时,我需要导航栏为白色。我试图自己做这件事,但它不能正常工作。这不是我试图达到的最终结果,我只是需要这个工作,以便我可以继续编码。感谢如果基于滚动位置的声明不起作用
https://codepen.io/Reece_Dev/pen/MmKprq
$(window).scroll(function() {
var scrollPos = $(window).scrollTop();
var page1Top = $("#sec_one").scrollTop();
var page1Bot = $("#sec_one").outerHeight();
var page2 = $("#sec_two").scrollTop();
var page3 = $("#sec_three").scrollTop();
if (scrollPos => page1Top && scrollPos < page1Bot) {
$('nav').css("background-color", "#ffffff");
}
});
* {
margin: 0;
padding: 0;
}
nav {
width: 100%;
background-color: black;
position: fixed;
top: 0;
}
nav ul {
width: 50%;
margin: 0 auto;
list-style-type: none;
text-align: center;
}
nav ul li {
display: inline;
width: 100%;
}
nav ul li a {
font-size: 40px;
color: white;
text-decoration: none;
}
nav ul li a {}
.sections {
width: 100%;
height: 100vh;
}
#sec_one {
background-color: blue;
}
#sec_two {
background-color: red;
}
#sec_three {
background-color: yellow;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<nav>
<ul>
<li><a href="" id="link 1">Link 1</a></li>
<li><a href="" id="link 2">Link 2</a></li>
<li><a href="" id="link 3">Link 3</a></li>
</ul>
</nav>
<div id="sec_one" class="sections">
</div>
<div id="sec_two" class="sections">
</div>
<div id="sec_three" class="sections">
</div>
答
这是因为 “大于或等于” 需要在JavaScript中这样写:>=
。你的是这样的:=>
。
而你需要的,如果滚动位置条件为假改回颜色:
if(scrollPos >= page1Top && scrollPos < page1Bot){
$('nav').css("background-color", "#ffffff");
} else {
$('nav').css("background-color", "#000000");
}
如果蓝色部分是在页面顶部的第一个,你应该把它定义为白色的CSS代码。
查看正在工作JSFiddle。
'=>'是javaScript中的一个箭头函数,使用'> ='代替。 –