jquery - 向下滚动页面时如何更改固定位置 h2 的颜色？

Question

在我的网站上，我有一个 h2 的小侧边栏，可以帮助您导航。这在主页上效果很好，但在照片没有填满整个屏幕的页面上效果不佳。当您向下滚动白色背景上的白色文本时，会使文本无法阅读。有没有办法让当你滚动过去 div（页面的 35%）时，文本可以将颜色从白色变为黑色？

如果有帮助的话，这里的这个人似乎会用他的标志的 svg 做类似的事情。

谢谢

Answer 1

我之前使用过jQuery 航点，效果很好。它使用起来非常简单，您指定执行操作的点，当它滚动到那里时，它就会执行这些操作。我使用了与您在此处描述的效果类似的效果。

Answer 2

试试下面的 JS Fiddle ...

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" : "");
       });
   });