Question

我正在使用Keith Clark's pure CSS parallax来创建网页，但我也尝试创建一个由页面滚动位置触发的事件。

Here是我目前在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，但不是第二个，所以我认为.scroll（）函数不会绑定到我提供它的任何东西。我试过$（窗口），$（文档）等等。它目前设置为$（'。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) + ")");
    }
  });
})

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

1 个答案: