滚动时显示两个像素值之间的div

Question

我试图显示3div(按顺序和滚动方式)，而只显示在每个div的两个像素值​​之间，但是我的脚本有一些地方我不明白：

我想展示的是：

• div-1只在200到500 px之间可见。
• div-2只在900到1200 px之间可见。
• div-3只在1600至1900 px之间可见。

我在这里做错什么了？

演示 (JSFiddle)

另一方面，有没有更简单、更优雅的方法来做到这一点呢？

提前感谢！

凭证：

$(window).scroll(function() {

  if ($(this).scrollTop() > 200) {
  //if (document.body.scrollTop > 200 || document.documentElement.scrollTop < 500) {
    $('#div-1').fadeIn();   
  }
  else {
  $('#div-1').fadeOut();
  };

  if ($(this).scrollTop() > 900) {
  //if (document.body.scrollTop > 900 || document.documentElement.scrollTop < 1200) {
    $('#div-2').fadeIn();   
  }
  else {
  $('#div-2').fadeOut();
  };

  if ($(this).scrollTop() > 1600) {
  //if (document.body.scrollTop > 1600 || document.documentElement.scrollTop < 1900) {
    $('#div-3').fadeIn();   
  }
  else {
  $('#div-3').fadeOut();
  };

});

HTML:

<div id="div-1">Radio</div>
<div id="div-2">Blog</div>
<div id="div-3">Store</div>

<div id="content"></div>

CSS:

#div-1,#div-2,#div-3 {
  display:none;
  position:fixed;
  width:200px;
  height:60px;
  margin:0 auto;
  text-align:center;
  font-size:20px;
  line-height:60px
}

#div-1{background:#ff0;color:#000}
#div-2{background:#000;color:#fff}
#div-3{background:green;color:#fff}

#content{text-align:center;height:2500px}

Answer 1

你只是想&&而已。

if ($(this).scrollTop() > 200 && $(this).scrollTop() < 500) {
    // ...
}
if ($(this).scrollTop() > 900 && $(this).scrollTop() < 1200) {
    // ...
}
if ($(this).scrollTop() > 1600 && $(this).scrollTop() < 1900) {
    // ...
}

如果滚动大于200，同时滚动小于500，则显示div-1。

下面是一个有用的示例：JSFiddle

Answer 2

你错过了几件事：

1. 所有的逻辑都应该使用&&而不是||。
2. 在显示或隐藏项目之前，您应该检查项目的可见性。
3. 您应该始终存储对通常访问的DOM元素的引用，特别是当您在滚动事件处理程序中访问它们时(这会触发一堆)。

好吧，最后一点只是表演.但你应该知道！这里有一个最新的小提琴：

http://jsfiddle.net/xebgpduv/

下面是一个逻辑块的样子：

if (scrollTop > 200 && scrollTop < 500) {
    if(!$div1.is(':visible')) {
        $div1.fadeIn(); 
    }
} else if($div1.is(':visible')) {
    $div1.fadeOut();
};