Question

I'm trying to create a smoother transition by making the background for .header slide up rather than just disappear when the bottom of div "1" hits the top of the page and the .header background changes from white to transparent. I've tried to achieve this by adding class .BGupTranisition to the CSS and jQuery (//up scroll - else{) but this doesn't work? Could someone point out what I'm doing wrong here?? :-)

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

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

解决方法是，如果您在linear-gradient中使用垂直.header { background: /* linear-gradient value here */ }颜色，或者可以在div后面创建另一个带有白色背景的div.header当你想要并使div.header bacground透明时。

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

Slide up animation on up scroll based on div position

1 个答案: