最佳答案
您可以将 100 添加到 $.scrollTop()
以查看元素何时距页面顶部 100px,并且仅在显示时发射要隐藏的元素符号(并且反之亦然)。
$(document).ready(function() {
var lastDiv = $("#section4").offset().top,
$bullets = $('#bullets');
$(window).scroll(function() {
var st = $(this).scrollTop();
if (st + 100 >= lastDiv) {
$bullets.is(':visible') && $bullets.fadeOut(100);
}
else if ($bullets.is(':hidden')) {
$bullets.fadeIn(100);
}
});
});
* {
padding: 0;
margin: 0;
}
#section1 {
width: 100%;
height: 100vh;
background-color: pink;
}
nav#bullets {
position: fixed;
top: 50%;
right: 15px;
z-index: 999;
transform: translateY(-50%);
background-color: rgba(0,0,0,0.5);
border-radius: 20px;
}
nav#bullets span {
cursor: pointer;
display: block;
height: 12px;
width: 12px;
border-radius: 50%;
margin: 15px 5px;
transition-duration: 0.5s;
}
nav#bullets span:after {
height: 8px;
width: 8px;
display: block;
content: "";
border: 2px solid white;
border-radius: 50%;
}
nav#bullets span:hover {
background-color: white;
transition-duration: 0.5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="bullets">
<a href="#section1"><span></span></a>
<a href="#section2"><span></span></a>
<a href="#section<nav id="bullets">
<a href="#section1"><span></span></a>
<a href="#section2"><span></span></a>
<a href="#section3"><span></span></a>
<a href="#section4"><span></span></a>
</nav>
<div class="section-wrapper">
<div id="section1" class="section" data-hash="a">
<div>
<h1>Slide 1</h1>
</div>
</div>
</div>
<div id="section4" class="footer">
<div>
<h1>Section 4</h1>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
</div>
</div>3"><span></span></a>
<a href="#section4"><span></span></a>
</nav>
<div class="section-wrapper">
<div id="section1" class="section" data-hash="a">
<div>
<h1>Slide 1</h1>
</div>
</div>
</div>
<div id="section4" class="footer">
<div>
<h1>Section 4</h1>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
<p>This section is not inside the section wrapper, so normal scrolling here!</p>
</div>
</div>
关于javascript - 当另一个 div 靠近页面顶部时隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44311631/