如何在用户到达id时改变头部颜色?HTML CSS

问题描述 投票:0回答:1

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>
html css layout frontend
1个回答
0
投票
<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>
© www.soinside.com 2019 - 2024. All rights reserved.