當您向下滾動頁面時，如何更改固定位置h2的顏色？

Question

在我的website我有一個h2的小側欄，可以幫助您導航。這可以在主頁上正常工作，但不會在照片不能填滿整個屏幕的頁面上正常工作。當您向下滾動白色背景上的白色文字時，文字將無法閱讀。有沒有辦法讓你滾動div（頁面的35％）時，文本可以將顏色從白色變爲黑色？

這個人here似乎與他的標誌svg類似的事情，如果有幫助。

謝謝

Answer 1

我以前效果良好使用jQuery waypoints。使用起來非常簡單，您可以指定執行事件的點，以及滾動到那裏時執行的點。我用了一個類似的效果來描述here。

Answer 2

嘗試以下JS小提琴......

http://jsfiddle.net/arunberti/uMPuW/39/

  $(document).ready(function() { 
     var $scrollingDiv = $("#hdr"); 

     $(window).scroll(function() { 
      $scrollingDiv.stop() 
       .animate({ 
       "marginTop": ($(window).scrollTop() + 0) + "px" 
      }, "slow"); 
      $scrollingDiv.css("color", (($(window).scrollTop()/$(document).height()) > 0.35) ? "orange" : ""); 
     }); 
    });