尝试在纯CSS视差上使用JS .scroll（）

Question

我正在使用Keith Clark的纯CSS视差创建网页，但是我也试图创建一个由页面滚动位置触发的事件。

到目前为止， 这是我在Codepen上的内容。 这是我对JS的要求：

console.log('loaded script - binding to scroll....');
$('.px').scroll(function() {
  console.log('Binded to scroll...');
  var scroll = $(window).scrollTop();
  console.log("scroll:" + scroll);
  if (scroll >= 0) {
    $('.pxLayer-base').css('background', 'rgba(197,199,187,' + (scroll/100) + ")");
  }
});

但是您必须查看HTML和CSS才能理解该问题。 我发现脚本已加载，然后再次在.scroll（）函数内部加载。 我得到了第一个ping，但没有得到第二个ping，因此我认为.scroll（）函数不会绑定到我提供的任何东西。 我已经尝试过$（window），$（document）和许多其他功能。 当前设置为$（'。px'），因为这是所有视差魔术发生的div类。

那么.scroll（）与我的网站不兼容吗？ 有解决方法吗？ 如果您不知道，我基本上是在用户向下滚动页面时尝试使div层淡入一种颜色。

Answer 1

您安装了jQuery吗？ 如果不是，请将其插入HTML头部：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

或者也许尝试使用等效的.scroll（）侦听器

$(document).on('scroll', '.px', function(){ 
    console.log('scrolling');
});

尝试将整个侦听器包装在document.ready中：

$(document).ready(function() {
  $('.px').scroll(function() {
    console.log('Binded to scroll...');
    var scroll = $(window).scrollTop();
    console.log("scroll:" + scroll);
    if (scroll >= 0) {
      $('.pxLayer-base').css('background', 'rgba(197,199,187,' + (scroll/100) + ")");
    }
  });
})