在滾動時替換頂部粘性div上的標題

Question

我正在處理的項目我想在滾動到新內容時在頂部div中更改標題標題（例如，We Thank You）。爲每個標題使用不同的圖像，如何通過css/html來實現這一點？這裏是頁面http://2facced.com/marcecko/

Answer 1

使用jQuery使這很容易，所以你可以捕獲滾動事件和滾動位置。請查閱如何從CDN中包含jQuery，jQuery網站上有幾個例子。

後您包括jQuery的，添加如下腳本：

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){//Anything inside this function runs once the page is finished loading 
    $(window).scroll(function() { //jQuery function that adds a handler to run code anytime the user scrolls. 
     var changeThreshold1 = 1000;//the first point on the page where we want to trigger a change 
     var changeThreshold2 = 2000;//the second 
     var changeThreshold3 = 3000;//you ge the idea 
     var changeThreshold4 = 4000; 
     if($(window).scrollTop() < changeThreshold1){//If the user has not yet scrolled past the first point, or has scrolled back above teh first point 
      $('#header').css('background-image','[image source 1]'); //changes the background image of the element with the header ID to the first image source replace [image source 1] with the actual image file name 
     }else if($(window).scrollTop() >= changeThreshold1 AND $(window).scrollTop() < changeThreshold2){//if the user has scrolled to the range between points 1 and 2 
      $('#header').css('background-image','[image source 2]'); 
     }else if($(window).scrollTop() >= changeThreshold2 AND $(window).scrollTop() < changeThreshold3){//if the user has scrolled to the range between points 2 and 3 
      $('#header').css('background-image','[image source 3]'); 
     }else if($(window).scrollTop() >= changeThreshold3 AND $(window).scrollTop() < changeThreshold4){//if the user has scrolled to the range between points 3 and 4 
      $('#header').css('background-image','[image source 4]'); 
     }else if($(window).scrollTop() >= changeThreshold4){//if the user has scrolled to the range beyond point 4 
      $('#header').css('background-image','[image source 5]'); 
     }else{//a failsafe default incase anything gets screwed up 
      $('#header').css('background-image','[image source default]'); 
     } 
    }); 
}); 
</script> 

編輯 - 評論回覆：

你的問題讓我相信你有一個關於如何HTML和JavaScript的工作的誤解。當用戶滾動到元素現在處於其可見區域的位置時，無法觸發腳本運行。你所要做的就是通過測量或明確設置知道觸發器頁面頂部有多少像素。然後檢測用戶滾動的距離，並根據已知的測量值進行檢查。如果他們已經通過了這一點，那麼你做出了改變。因此，頁面上的一個腳本會基於檢測用戶滾動的時間和距離而做出所有更改。我已經修改了我的答案，爲您提供了一個更好的示例和更全面的筆記。我希望它能幫助你更好地理解。