【问题标题】:Gradually increment CSS opacity on scroll down with Jquery使用 Jquery 向下滚动时逐渐增加 CSS 不透明度
【发布时间】:2020-07-15 02:17:33
【问题描述】:

我正在尝试使用带有 rgba 值的背景颜色使我的 div 容器变暗,并在用户向下滚动页面时逐渐增加 alpha 值。所以当他向下滚动大约 500 像素时,alpha 值达到 1 = 完全黑暗。我如何使用 jquery 或 javascript 来实现这一点?

我已经尽我所能,但我只能让它以每 100px 的增量变暗,但我希望它是从 0px 到 500px 向下滚动的恒定平滑不透明度过渡。

【问题讨论】:

  • 你试过什么?
  • ive 只尝试了断点,所以每滚动 100px 我添加了一条语句以将不透明度增加 0.1,但 id 需要 10 个断点并且它不平滑,所以这不起作用
  • 其实它和卷轴没有任何关系:)

标签: javascript html jquery css


【解决方案1】:

了解$(document).on("scroll"); 如果您从未使用过events,那么我建议您先阅读events。随着滚动更流畅,我想它更棘手。

祝你好运:)

【讨论】:

  • 我知道滚动事件如何完美运行。我只想达到平滑度
  • 我明白了。我认为断点并不是真正需要的。为什么不只根据滚动位置计算不透明度?如果您添加一些代码,人们将能够提供更多帮助。
猜你喜欢
  • 2016-08-20
  • 2017-09-13
  • 1970-01-01
  • 2014-02-27
  • 1970-01-01
  • 1970-01-01
  • 2013-09-19
  • 2014-10-17
  • 2013-01-03
相关资源
最近更新 更多