Question

我的网站有多个全屏幕背景（好，100％宽度，设置高度为1024px）

当你向下滚动时，这个脚本做（或应该做）的内容淡出一个div并淡入另一个div。

然而，为了让生活更轻松，使用nth-child选择器 - 这在前两个div上效果很好，但在之后没有。

任何帮助？

$(document).ready(function(){
var didScroll = false;
var $window = $(window);

$(window).scroll(function(){
  didScroll = true;
});

window.setInterval(function () {
if (didScroll) {
  if (1-$window.scrollTop()/1024 > -10) {
      $('.item:nth-child(even)').css({opacity: 1-$window.scrollTop()/1024});
      $('.item:nth-child(odd)').css({opacity: 1*$window.scrollTop()/1024});
  }
  didScroll = false;
}
}, 50);
});

Answer 1

nth-child 不限制为偶数或奇数，只需使用您想要的任何数字。例如：

$(".item:nth-child(3)").css({opacity: 1-$window.scrollTop()/1024})

修改

现在这样的事情应该有效：

$('.item:nth-child(1)').css({opacity: 1-$window.scrollTop()/1024}); $('.item:nth-child(2)').css({opacity: 2-$window.scrollTop()/1024}); $('.item:nth-child(3)').css({opacity: 3-$window.scrollTop()/1024});

JSFiddle：http://jsfiddle.net/yDuh7/ 或另一个：http://jsfiddle.net/yDuh7/1/

Jquery滚动全屏幕背景

1 个答案: