Window 顶部滚动功能不正确

Question

我正在运行使用 window 滚动功能来尝试判断 div #home-cover1 何时出现。然后当代码不在视图中时，将运行 else 语句。

如果你拉起你的控制台，你会看到 else 永远不会运行ning，尽管 div 你在里面说 #home-cover1 在视图中。

有人知道为什么吗？

$(function() {
  var section1 = $('#home-cover1');
  if (section1.length) {
   var oTop = section1.offset().top - window.innerHeight;
  }
  $(window).scroll(function() {
   var pTop = $(document).scrollTop();
   if (pTop > oTop) {
    console.log("OVer it");
    $('#proposal-trigger').removeClass('active');
   }
   else {
    console.log("Nope it");
    $('#proposal-trigger').addClass('active');
   }
  });
 });

#home-cover1 {
  background: green;
  height: 100vh;
   width: 100%;
}
#red {
  background: red;
  height: 100vh;
   width: 100%;
}
#blue {
  background: blue;
  height: 100vh;
   width: 100%;
}
#proposal-trigger {
 background: #3B3B3B;
 width: 100px;
 height: 100px;
 position: fixed;
 bottom: 0;
 right: 200px;
 opacity: 0;
 transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-trigger.active {
 opacity: 1;
 transition: ease 0.3s;-webkit-transition: ease 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="home-cover1"></section>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger"></div>

Answer 1

快速检查后 var oTop = section1.offset().top - window.innerHeight; 结果为负数，因此 pTop 总是大于 oTop。您必须用 window.innerHeight 减去 section1.offset()。您还必须将 pTop > oTop 切换为 pTop < oTop。这将检查 scrollTop 是否已低于该部分。

$(function() {
  var section1 = $('#home-cover1');
  if (section1.length) {
   var oTop = window.innerHeight - section1.offset().top;
  }
  $(window).scroll(function() {
   var pTop = $(document).scrollTop();
      console.log(pTop);
      console.log(oTop);
   if (pTop < oTop) {
    console.log("OVer it");
    $('#proposal-trigger').removeClass('active');
   }
   else {
    console.log("Nope it");
    $('#proposal-trigger').addClass('active');
   }
  });
 });

#home-cover1 {
  background: green;
  height: 100vh;
   width: 100%;
}
#red {
  background: red;
  height: 100vh;
   width: 100%;
}
#blue {
  background: blue;
  height: 100vh;
   width: 100%;
}
#proposal-trigger {
 background: #3B3B3B;
 width: 100px;
 height: 100px;
 position: fixed;
 bottom: 0;
 right: 200px;
 opacity: 0;
 transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#proposal-trigger.active {
 opacity: 1;
 transition: ease 0.3s;-webkit-transition: ease 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="home-cover1"></section>
<section id="red"></section>
<section id="blue"></section>
<div id="proposal-trigger"></div>

Window 顶部滚动功能不正确

Window Scroll function over top not correct

javascript

jquery

scroll

window