Question

我有一个被另一个div覆盖的div，并且当窗口的底部大于div的一半时，我试图让掩盖逐渐消失（显示div下方）。当顶部撞到窗口的顶部时，我能够让它用于淡化，但是我从那以后编辑了它并且它不再起作用了。

这是一个JSfiddle示例： http://jsfiddle.net/DnJ2z/676/

这是我的JavaScript代码：

$(document).ready(function() {
    var scrollBottom = $(window).scrollTop() + $(window).height();
    var middleofDiv = $("#redCover").offset().top + (document.getElementById('redCover').clientHeight/2);
    $(window).scroll(function() {
        if(scrollBottom > middleofDiv) { //scrolled past the other div?
            $("#redCover").fadeOut(2000); //reached the desired point -- show div
        }
    });
  });

对于这个例子，我想要它，以便当窗口的底部超过绿色div的一半时，触发淡入淡出。

作为旁注，我在页面上有三个Div + coveredDiv，所有类都是“背景”和“封面”。如果我可以使这个Javascript工作，有没有办法使它适用于所有类而不是单个元素？

感谢您提供任何帮助！

Answer 1

您的问题是scrollTop()根据您滚动到的位置而有所不同。你正在运行它onload，所以它总是一样的。它需要在scroll事件中运行。试试这个：

$(function(){
  var rC = $('#redCover'), middleofDiv = rC.offset().top + (rC.height()/2);
  $(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() > middleofDiv){
      //scrolled past the other div?
      rC.fadeOut(2000); //reached the desired point -- show div
    }
  });
});

Fiddle

如承诺：

$(window).scroll(function(){
  var sT = $(window).scrollTop(), wH = $(window).height();
  $('.color').each(function(){
    var ths = $(this);
    if(sT + wH > ths.offset().top + (ths.height()/2)){
      ths.fadeOut(2000);
    };
  });
});

Fiddle

请注意，您#greenDiv附近有#redCover。

当窗口底部通过一个点时，JavaScript会褪色

1 个答案: