2016-01-08 86 views
1

如何將標題內容txt顏色從白色(內部面板1)過渡到黑色(階段2-22)。我在jQuery的應用CSS類,但在向上滾動的標題,內容的txt顏色仍顯示黑色的面板1,它應該是白色滾動導航過渡

var lastScrollTop = 0; 
 
$(window).scrollTop(0); 
 

 
$(window).on('scroll', function() { 
 
    var header = $('header'); 
 
    var content = $('content'); 
 
    var headerBg = $('.header-bg'); 
 
    var scrollTop = $(window).scrollTop(); 
 
    var dynHeaderVisible = false; 
 
    
 
    
 
    // up scroll 
 
    if (scrollTop <= 400) { 
 
    headerBg.css("height", 0); 
 
    header.removeClass("header-content"); 
 
    header.addClass('header-white'); 
 
    } else { 
 
    headerBg.css("height", 80) 
 
    header.addClass('header-black'); 
 
    } 
 
    
 
    lastScrollTop = scrollTop; 
 
}); 
 

 
$.fn.isOnScreen = function(){ 
 
    var element = this.get(0); 
 
    var bounds = element.getBoundingClientRect(); 
 
    return bounds.top < window.innerHeight && bounds.bottom > 0; 
 
}
* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
header { 
 
    display: block; 
 
    position: fixed; 
 
    height: 80px; 
 
    width: 100%; 
 
} 
 

 
header ul { 
 
    z-index: 20; 
 
} 
 

 
.header-wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: transparent; 
 
} 
 

 
.header-bg, 
 
.header-content { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.header-bg { 
 
    z-index: 100; 
 
    color: gray; 
 
    background-color: white; 
 
    border-bottom: 1px solid black; 
 
    transition: .3s height; 
 
    height: 0; 
 
} 
 

 
.header-content { 
 
    z-index: 200; 
 
    transition: .3s color; 
 
    background-color: transparent; 
 
    height: 80px; 
 
} 
 

 
.header-white{ 
 
    z-index: 200; 
 
    transition: .3s color; 
 
    background-color: transparent; 
 
    height: 80px; 
 
    color: white; 
 
} 
 

 
.header-black{ 
 
    color: black; 
 
} 
 

 
content { 
 
    display: block; 
 
    height: 2000px; 
 
    background-color: orange; 
 
} 
 

 
.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: white; 
 
\t border-bottom: 1px solid black; 
 
    font-size: 48px; 
 
\t height: 200px; 
 
\t width: 100%; 
 
} 
 

 
.stage-0 { 
 
    background: grey; 
 
    height: 400px; 
 
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<header> 
 
    <div class="header-wrapper"> 
 
    <div class="header-bg"></div> 
 
    <div class="header-content"> 
 
     <ul> 
 
     <li>YOUR HEADER</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</header> 
 
<content> 
 
<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> 
 
</content>

回答

0

嗯,我首先要注意的是,這些元素的z-索引沒有做任何事情,因爲他們沒有position:rule。

其次,scrollTop不接受參數。

第三,你對這個位滾動備份:

`

if (scrollTop <= 400) { 
    headerBg.css("height", 0); 
    headerCnt.css('color', 'white'); 
    } 

的變化添加回白色。代碼需要清理一下,但我會把它留給你。有一些不必要的重複正在進行。這是我爲它製作的JSFiddle。

https://jsfiddle.net/dd2marmu/

+0

移動iOS上的標題不會在屏幕頂部向下滑動/向上的sroll和顫動,這是一個錯誤,由於你正在談論的scrollTop的問題?我可以用什麼不同的方法來實現我在找的東西? //jsfiddle.net/or0aL04q感謝您的幫助! – Jenny