https:/www.onepeloton.com 我想创建一个类似的头像。
现在,我创建了一个头和一个sticky类,如果我向下滚动,头将是透明的,但我想让它不透明,如果我到达一个ID的div。如果我向下滚动,头部将是透明的,但我想让它不透明,如果我到达一个ID的div。
header {
padding: 5px 10px;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background-color: #F9E3E5;
}
header.sticky {
background: #F9E3E5;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
background: linear-gradient(to top, rgba(249,227,229, 0.0), rgba(249,227,229, 0.0));
}
HTML:
<header>
<a id="#1">1st</a>
<a id="#2">2nd</a>
</header>
<section>
<a id="#3">3rd</a>
</section>
<section>
<a id="#4">4th</a>
</section>
<script>
var top1 = $('#header').offset().top
var top2 = $('#2').offset().top;
var top3 = $('#3').offset().top;
$(document).scroll(function() {
var scrollPos = $(document).scrollTop();
if (scrollPos >= top2 && scrollPos < top3) {
$('header').css('background-color', '#F9E3E5');
} else if( scrollPos == 0) {
$('header').css('background-color', '#fff');
}
});
</script>