为什么 scrollTop 不改变 -webkit-filter: blur()？答案

【问题标题】：Why doesn't scrollTop change -webkit-filter: blur()?为什么 scrollTop 不改变 -webkit-filter: blur()？
【发布时间】：2015-01-21 19:08:11
【问题描述】：

这是一个小提琴：

这是我的 JS：

$(window).scroll ->
 scrollValue = ($(window).scrollTop())
 $(".img").css "webkitFilter : blur", scrollValue

和 CSS：

#height {
 height: 200vh;
}
#img {
 -webkit-filter: blur(5px);
}

基本上，我试图在向下滚动时更改模糊半径，但它似乎不起作用。

<div id="height">
<img id="img" src='https://farm8.staticflickr.com/7474/16082786652_6372b547bd_n.jpg' />
</div>

有人知道为什么它不起作用吗？

感谢您的帮助！

【问题讨论】：

【解决方案1】：

看起来你可能正在使用 CoffeeScript，但你的 jsfiddle 没有使用它，所以我只是将常规 JavaScript 与 jQuery 一起使用。

img 的选择器错误。使用句点.按类选择，使用磅/哈希#按ID选择。

试试这个（如果你愿意，可以转换成 CoffeeScript）：

$(window).scroll(function () {
  var scrollValue = $(window).scrollTop();
  $("#img").css("webkitFilter", "blur(" + scrollValue + "px)");
});

【讨论】：