Как изменить цвет фиксированной позиции 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" : ""); 
     }); 
    });