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

Question

我正在运行窗口滚动功能来尝试和测量div #home-cover1何时在视图中。然后，如果代码不能运行else语句。

如果你拉起你的控制台，你会看到其他从未运行，尽管你在其中的div说#home-cover1在视图中。

有没有人看到为什么？

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

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

<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更大。你必须减去section1.offset()window.innerHeight。您还必须将pTop > oTop切换为pTop < oTop。这将检查scrollTop是否已经低于该部分。

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

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