[英]Fade out content when scrolling down under header position fixed
我试图在其他问题上阅读很多有关此内容的信息,但我似乎对此没有完美的代码。
我的位置固定标头对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;
})
据我了解,您需要默认将background-color:#ffffff
设置为#header
#header{
background-color:#ffffff;
}
然后在添加类时设置background-color:dimgray
#header.scrolled{
background-color:dimgray;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.