jquery - 如何在使用jQuery滚动时实现颜色过渡

我想像这样的http://livearealabs.com/在导航标题上实现效果

怎么做到呢？

这是我做了jsfiddle.net/abismo/D6H33

最佳答案

好了，在该页面上进行了很多分解之后，实际上有4个绝望的菜单，它们使用了translateY css属性并使用z-index来使菜单的外观实际改变颜色，您将不得不阅读translateY
以及滚动窗口滚动功能，我将其放到一个非常基本的版本中，需要大量工作，但希望您能获得要点：

var getheightblue = $('#divone').height();
var scroll = $(window).scroll();
var reduce = 0;
var increase = 100;
var lastScrollTop = 0;
$(window).scroll(function () {
 var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
        reduce = reduce -= 5;
        increase = increase -= 5;
        $('.wrap.dark.transparent').css('-webkit-transform', 'translateY(' + reduce + '%)');
        $('.wrap.light').css('-webkit-transform', 'translateY(' + increase + '%)');
   } else {
      // upscroll code
        reduce = reduce += 5
        increase = increase += 5
        $('.wrap.dark.transparent').css('-webkit-transform', 'translateY(' + reduce + '%)');
        $('.wrap.light').css('-webkit-transform', 'translateY(' + increase + '%)');
   }
   lastScrollTop = st;

});

fiddle
祝好运！