javascript - 顶部的窗口滚动功能不正确

我正在运行一个窗口滚动功能，以尝试查看div #home-cover1的时间。然后，当代码不在视图中时，即可运行else语句。

如果拉起控制台，您将看到else永不运行，并且尽管您所在的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>

最佳答案

快速检查后，var oTop = section1.offset().top - window.innerHeight;结果为负数，因此pTop始终大于oTop。您必须用section1.offset()减去window.innerHeight。您还必须将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>