如何解决重新加载页面时,滚动上的彩色导航栏不会切换为彩色
此代码根据页面的滚动程度在透明导航栏和白色导航栏之间切换。但是,如果在页面滚动到导航栏应为白色的位置时重新加载页面,则页面在重新加载后将再次变为透明,直到我开始滚动(然后变为白色)。如果重新加载页面,如何在滚动之前将其设置为白色?
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$("nav").addClass("scrolled");
} else {
$("nav").removeClass("scrolled");
};
});
解决方法
$(document).ready(function(){
if ($(window).scrollTop() > 50){
$("nav").addClass("scrolled");
}else{
$("nav").removeClass("scrolled");
};
});
尝试一下并提供反馈
,根据评论进行编辑,以检查加载时的滚动并适当设置样式。
function toggleScroll(){
if ($(window).scrollTop() > 50) {
$("nav").addClass("scrolled");
} else {
$("nav").removeClass("scrolled");
};
}
$(window).scroll(function() {
toggleScroll();
$( "nav" ).text( $(this).scrollTop() );
});
$(function() {
toggleScroll();
$( "nav" ).text( "Loaded with scroll: " + $(this).scrollTop() );
});
.container {
height: 2000px;
background-color: gray;
}
nav {
position: fixed;
top: 20px;
left: 20px;
height: 150px;
width: 150px;
padding: 40px;
background-color: transparent;
}
.scrolled {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<nav id="nav">
Nav
</nav>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。