期待使用Javascript創建響應式褪色標題效果

Question

這是我的第一篇文章，所以請如果有任何額外的信息我可以給予或澄清我說的東西，請不要猶豫，問。

我正在創建一個標題，根據用戶當前正在查看的部分從一個圖像淡入淡出。

什麼我現在是設置爲根據是什麼，該Y定位是改變標題圖片，如下所示：

$(document).scroll(function() { 
var y = $(this).scrollTop(); 
if (y > 0) { 
    $('#img1').fadeIn({}); 
} 
else {$('#img2').fadeOut('fast')}; 
if (y > 500) { 
    $('#img2').fadeIn({}); 
} 
else {$('#img2').fadeOut('fast')}; 

if (y > 1000) { 
    $('#img3').fadeIn({}); 
} 
else {$('#img3').fadeOut('fast')}; 

if (y > 1500) { 
    $('#img4').fadeIn({}); 
} 
else {$('#img4').fadeOut('fast')}; 

雖然這工作，它不是試圖使當一個有效的解決方案一個網站響應。我有我的每個部分IDed（「部分-1」「部分-2」等），並希望創建代碼，根據用戶當前正在查看的部分ID更改標題。我被告知在這種情況下div數組可能會有所幫助，但我仍然對Javascript非常陌生，所以我不確定如何嘗試此操作。

任何可以給這個項目的幫助將不勝感激。

編輯1：在HTML和CSS中添加該項目的標題部分，但如果需要查看其他代碼，請告訴我。

HTML

<header class="pull-center" id="masthead"> 
    <nav class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container"> 
      <div id="img1"></div> 
      <div id="img2"></div> 
      <div id="img3"></div> 
      <div id="img4"></div> 
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <a class="brand brand-ctg" href="#section-1"><span></span></a> 
       CTG 
       <span></span> 
      </a> 
      <div class="nav-collapse"> 
       <ul class="nav"> 
        <li><a href="#section-2">Demo Reel</a></li> 
        <li><a href="#section-3">Portfolio</a></li> 
        <li><a class="brand brand-ctg" href="#section-1"> <span></span></a></li> 
        <li><a href="#section-4">Contact</a></li> 
        <li><a href="http://www.colortheblog.com" target="_blank">Blog</a></li> 
       </ul> 
      </div> 
     </div> 
     </div> 
    </nav> 
    </header> 

CSS（目前我只有 「IMG」 DIV + CSS，但如果你需要看到更多，請讓我知道）

#img1 { 
    display: block !important; 
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-blue.png") repeat-x scroll 50% 0 transparent !important; 
    height: 200px; 
    left: 0; 
    position: fixed !important; 
    right: 0; 
} 
#img2 { 
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-salmon.png") repeat-x scroll 50% 0 transparent !important; 
    height: 200px; 
    left: 0; 
    position: fixed !important; 
    right: 0; 
} 
#img3 { 
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-yellow.png") repeat-x scroll 50% 0 transparent !important; 
    height: 200px; 
    left: 0; 
    position: fixed !important; 
    right: 0; 
} 
#img4 { 
    background: url("http://www.colorthegrayscale.com/images/headers/headericon-mint.png") repeat-x scroll 50% 0 transparent !important; 
    height: 200px; 
    left: 0; 
    position: fixed !important; 
    right: 0; 
} 

編輯2：用於演示目的的新代碼

$(document).scroll(function() { 
var y = $(this).scrollTop(); 
if ($("#section-1").scrollTop()) { 
    $('#img1').fadeIn({}); 
} 
else {$('#img2').fadeOut('fast')}; 
if ($("#section-2").scrollTop()) { 
    $('#img2').fadeIn({}); 
} 
else {$('#img2').fadeOut('fast')}; 

if ($("#section-3").scrollTop()) { 
    $('#img3').fadeIn({}); 
} 
else {$('#img3').fadeOut('fast')}; 

if ($("#section-4").scrollTop()) { 
    $('#img4').fadeIn({}); 
} 
else {$('#img4').fadeOut('fast')}; 

}）;

Answer 1

那麼，你的問題是，你的if{} else{}命令不匹配：

var y = $(this).scrollTop(); 
if (y > 0) { 
    $('#img1').fadeIn({}); 
} 
else {$('#img2').fadeOut('fast')}; 

「如果我們在頂部，淡入＃1，否則淡出＃2

根據HTML排序（因此圖像的堆疊）IMG1可以是在z順序頂部，所以它永遠不會淡出，它永遠不會揭示了其它圖像。

您應該重新考慮您的if語句，以使每個語句的最小值最大值爲和，這些值適用於任何給定的標題圖像。更何況，如果您的內容更改大小，您的滾動高度現在不正確（您應該根據achor的滾動位置計算它們）。

Nechemya Kanelsky的盒裝解決方案也可能是一個更好的計劃（我不熟悉這兩個網站）。