滚动时如何让div改变不透明度？ （视差）

Question

我想知道如何创建类似视差滚动效果的东西。向下滚动越远，div越不透明，在某一点之后，它再次开始变得更透明。我知道JS / JQuery需要这样做。有人能给我一个简单的方法来实现这个目标吗？

Answer 1

你应该使用scrolltop并实现你自己的数学逻辑，div滚动时div不透明度会发生变化 这是函数：$（window）.scrollTop（）

Answer 2

我为你提供了一个帮助：基本上你可以听取滚动事件，并根据方向控制css opacity属性。

var opc = 1;
var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
        changeOpacity(0, -0.1)       
   } else {
      changeOpacity(1, +0.1)     
   }
   lastScrollTop = st;
});

function changeOpacity (limit, amount) {
    if(opc !== limit){
        opc = opc + amount;
        $('#content').css('opacity' , opc);
    }
}

http://jsfiddle.net/Mvf67/1909/

希望这有帮助！