javascript - 当另一个 div 靠近页面顶部时隐藏 div

Question

当滚动时另一个 div 靠近屏幕顶部时，我想隐藏一个 div。

这是目前的工作方式:Codepen

所以当 section4 距离页面顶部大约 100px 时，隐藏 bullets。

Answer 1

您可以将 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>