根據滾動顯示圖像的新部分

Question

第一次張貼海報。我應該首先說我是一名平面設計師，正在設計一個網站，我將不得不編碼。我有最小的JavaScript/jQuery體驗。我有麻煩試圖找出如何基於網頁上的位置顯示圖像的新部分。

我在設計一個水肺潛水網站，我試圖複製左下方網站中使用的深度定位器。我不會只有一個數字，而是在每個深度都有關於認證級別的信息。有關如何使用文字或圖像進行此操作的任何建議，該圖像將根據網頁上的位置進行更改。

http://lostworldsfairs.com/atlantis/

謝謝！

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 

    var depths = [1500,4000,7000]; 
    var words = ['shallow','medium','deep','darkness']; 

    $(document).ready(function() { 

     $(window).scroll(function() { 
     var depth = Math.floor($(window).scrollTop()); 

     for(i in depths){ 

      if(depth<depths[i]){ 
      $("#depth-o-meter").html(words[i]); 
      break; 
      } 

     } 


     }); 

    }); 

</script> 

<div style = 'position:fixed' ><span id = 'depth-o-meter' >aaa </span></div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

這是一些測試數據和HTML測試腳本:)它的工作原理

Answer 2

您可能需要使用不同的滾動位置值來確定您在頁面上的位置。該鏈接的問題有jQuery中獲取這些值一些好的建議

How do I determine height and scrolling position of window in jQuery?

你只想要一個onscroll處理程序可能觸發你的內容的變化是這樣的：

$('body').scroll(function() { 
    // determine current scroll position 
    var scrollPosition = 0; 
    // determine position as per linked question 

    // change scroll image based on scroll position, assume this image has id of scrollImage 
    var scrollImage = $("#scrollImage"); 
    if (scrollPosition < 100) { 
     scrollImage.attr("src", "http://domain.com/path/to/image"); 
    } else if (scrollPosition < 200) { 
     scrollImage.attr("src", "http://domain.com/path/to/another/image"); 
    } // etc. 
});