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

【问题标题】：How to have a div change opacity when scrolling? (Parallax)滚动时如何让div改变不透明度？（视差）
【发布时间】：2015-06-12 06:05:53
【问题描述】：

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

【问题讨论】：

您需要 scrollTop() ，其余的您可以自己解决。在寻求帮助之前，您应该先尝试。
Div opacity based on scrollbar position 的可能重复项

标签： javascript jquery html css

【解决方案1】：

我为你创建了一个小提琴来帮助你：基本上你可以监听滚动事件，并根据方向控制 css 的不透明度属性。

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/

希望这会有所帮助！

【讨论】：

【解决方案2】：

您应该使用 scrolltop 并实现您自己的数学逻辑，并且 div 不透明度会随着您滚动而改变这是函数：$(window).scrollTop()

【讨论】：