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

Question

我正在运行一个窗口滚动功能来尝试判断 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>

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>