javascript - 根据 div 位置向上滚动滑动动画

Question

我试图通过使 .header 的背景向上滑动而不是在 div“1”的底部到达页面顶部并且 .header 背景从白色变为透明时消失来创建更平滑的过渡。我尝试通过将 .BGupTranisition 类添加到 CSS 和 jQuery (//向上滚动 - else{) 来实现此目的，但这不起作用？有人可以指出我在这里做错了什么吗？ :-)

var lastScrollTop = 0;
$(window).on('scroll', function() {
    var header = $('.header');
    var stage0 = $('.stage-0');
    var scrollTop = $(window).scrollTop();
    if (scrollTop > lastScrollTop) {
        // down scroll
        if (scrollTop > stage0.offset().top + stage0.height()) {
            header.addClass('hide');
        }
    } else {
        // up scroll
        if (scrollTop <= stage0.offset().top + stage0.height()) {
            header.removeClass('headerBGchange headerLIchange');
        } else {
            header.removeClass('hide').addClass('headerBGchange headerLIchange BGupTranistion');
        }
    }
    lastScrollTop = scrollTop;
});

.header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 80px;
    -webkit-transition: top .5s ease;
    transition: top .5s ease;
    position: fixed;
    width: 100%;
    top: 0;
    background-color: transparent;
    overflow: hidden;
}

.header ul {
    margin: 20px;
    padding: 0;
}

.header ul li {
    display: inline-block;
    margin-right: 20px;
    color: white;
}

.header ul li:last-child {
    margin-right: 0;
}

.hide {
    top: -80px;
}

.headerBGchange {
    Background: white;
}

.BGupTranistion {
   <!--slide back up animation-->
}

.header.headerLIchange ul li {
    color: Blue;
}
.stage {
    color: #fff;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 100vh;
    background-color: bisque;
    font-size: 48px;
	
}
.stage-0 {
    background: black;
}

.stage-1 {
    background: #030202;
}

.stage-2 {
    background: #060505;
}

.stage-3 {
    background: #080707;
}

.stage-4 {
    background: #0b0a09;
}

.stage-5 {
    background: #0e0c0b;
}

.stage-6 {
    background: #110e0e;
}

.stage-7 {
    background: #141110;
}

.stage-8 {
    background: #161312;
}

.stage-9 {
    background: #191515;
}

.stage-10 {
    background: #1c1817;
}

.stage-11 {
    background: #1f1a19;
}

.stage-12 {
    background: #221d1c;
}

.stage-13 {
    background: #241f1e;
}

.stage-14 {
    background: #272120;
}

.stage-15 {
    background: #2a2422;
}

.stage-16 {
    background: #2d2625;
}

.stage-17 {
    background: #302827;
}

.stage-18 {
    background: #322b29;
}

.stage-19 {
    background: #352d2c;
}

.stage-20 {
    background: #38302e;
}

.stage-21 {
    background: #3b3230;
}

.stage-22 {
    background: #3e3432;
}

.stage-23 {
    background: #413735;
}

.stage-24 {
    background: #433937;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="header">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>
<div class="stage stage-0">1</div>
<div class="stage stage-2">3</div>
<div class="stage stage-4">5</div>
<div class="stage stage-6">7</div>
<div class="stage stage-8">9</div>
<div class="stage stage-10">11</div>
<div class="stage stage-12">13</div>
<div class="stage stage-14">15</div>
<div class="stage stage-16">17</div>
<div class="stage stage-18">19</div>
<div class="stage stage-20">21</div>
<div class="stage stage-22">23</div>

Answer 1

请注意，背景是 div 的一个属性，它与 div 本身占据相同的区域。话虽如此，如果不移动 div 的内容而不使用 text 属性，就无法移出 div 的背景。

解决此问题的方法是，在 .header { background:/* 此处使用线性渐变值 */} 中使用垂直 线性渐变 颜色，或者您可以在 div.header 后面创建另一个具有白色背景的 div，当您想要时向上滑动并使 div.header 背景透明。

第一种方法需要您根据 JavaScript 中的滚动值计算该值。