时间戳

首页 > 解决方案 > 滚动时在两个像素值之间显示 div

javascript - 滚动时在两个像素值之间显示 div

问题描述

我正在尝试显示 3 个 div（顺序和滚动时），并且每个 div 仅在两个像素值之间显示，但是我的脚本有一些我不明白的地方：

我想展示的是：

我在这里做错了什么？

演示（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}

标签： javascript

解决方案

你只是失踪了&&。

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

推荐阅读