我试图在其他问题上阅读很多关于此问题,但我似乎没有完美的代码。
我的位置固定标题具有jquery的可滚动效果。向下滚动时,它会显示另一种背景颜色。
但是当我向下滚动时,内容会在标题的过渡颜色中间从白色变为黑色。所以我想解决的是我的内容隐藏在标题背景转换之前(或同时在流程中)。
CSS:
#header {
position:fixed;
display:block;
width:100%;
overflow:hidden;
top:0;
left:0;
padding-left:0vmax;
padding-right:5vmax;
z-index:99999;
height:9vmax;
max-height:9vmax;
transition: 0.4s ease-in-out;
box-sizing:border-box;
}
#content{width:100%;height:auto;margin-top:14vmax;margin-bottom:0px;overflow:auto;z-index:0;position:relative;}
试过这个,但是这段代码是为了隐藏标题而不是内容,所以它会随着我的代码而闪烁。
var mywindow = $(window);
var mypos = mywindow.scrollTop();
var up = false;
var newscroll;
mywindow.scroll(function () {
newscroll = mywindow.scrollTop();
if (newscroll > mypos && !up) {
$('#content').stop().fadeOut();
up = !up;
console.log(up);
} else if(newscroll < mypos && up) {
$('#content').stop().fadeIn();
up = !up;
}
mypos = newscroll;
})
答案 0 :(得分:1)
据我了解,您需要将background-color:#ffffff
默认设置为#header
,例如
#header{
background-color:#ffffff;
}
然后在添加类
时设置background-color:dimgray
#header.scrolled{
background-color:dimgray;
}
<强> Updated Fiddle ▸ 强>