2015-12-10 206 views
1

我試圖通過使.header的背景向上滑動而不是僅在div「1」的底部觸及頁面頂部時消失而創建更平滑的過渡並且.header背景從白色變爲透明。我試圖通過將類.BGupTranisition添加到CSS和jQuery(//上滾 - 否則{)來實現此目的,但這不起作用?有人能指出我在這裏做錯了嗎? :-)向上滾動基於div位置的向上滾動動畫

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; 
 
\t 
 
} 
 
.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>

回答

0

注意,背景是佔據相同的面積DIV本身的div的屬性。話雖如此,你不能移動div的背景,而不移動div的內容而不玩弄文本屬性。

的解決方案是,如果你在.header { background: /* linear-gradient value here */ }玩弄垂直linear-gradient顏色,也可以創建另一個div與向上滑動,當你想在div.header背後白色背景,使div.header bacground透明。

第一種方法會要求您根據javascript中的滾動值計算值。