Question

通常我会通过将div设置为从顶部开始按照设定的像素数来淡入。像下面的例子。但我的问题是我的一个内容字段的高度是动态的，所以它不断变化。有一次它是200像素长，接下来是500像素。所以我想知道如何通过检测视口中是否有另一个div来淡入淡入淡出。任何人都知道如何做到这一点？

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

Answer 1

这里有5个例子（http://www.sitepoint.com/5-jquery-viewport-plugins/）。这些依赖于使用类似于＆＃39; isInViewport＆＃39;的选择器。（例如$('img:isInViewport')）根据是否在视图中做某事。如果你想自己编写，你需要使用Javascript来获取元素的boundingRectangle，并确定它是否在可见视口内。

Answer 2

尝试与jquerys .offset().top或.position().top

的各种组合

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > $('yourdiv').offset().top) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

滚动时显示Div，然后在不可见时隐藏

2 个答案: