當另一個div靠近頁面頂部時隱藏div

Question

當另一個div靠近滾動屏幕的頂部時，我想隱藏div。

這是如何工作的時刻：Codepen

所以當section4就像是100px的從頁面的頂部，隱藏bullets。

Answer 1

您可以將100添加到$.scrollTop()，以查看頁面頂部的元素何時爲100px，並且只顯示子項（如果顯示的話則是隱藏的）（反之亦然）。

$(document).ready(function() { 
 
    var lastDiv = $("#section4").offset().top, 
 
     $bullets = $('#bullets'); 
 
\t \t $(window).scroll(function() { 
 
     var st = $(this).scrollTop(); 
 
\t \t if (st + 100 >= lastDiv) { 
 
     $bullets.is(':visible') && $bullets.fadeOut(100); 
 
\t \t } 
 
\t \t else if ($bullets.is(':hidden')) { 
 
\t \t  $bullets.fadeIn(100); 
 
\t \t } 
 
\t \t }); 
 
});

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#section1 { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-color: pink; 
 
} 
 

 
nav#bullets { 
 
\t 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 { 
 
\t 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"> 
 
\t \t <div id="section1" class="section" data-hash="a"> 
 
\t \t \t <div> 
 
\t \t \t \t <h1>Slide 1</h1> 
 
\t \t \t </div> 
 
\t \t </div> 
 
</div> 
 

 

 
<div id="section4" class="footer"> 
 
\t \t <div> 
 
\t \t \t <h1>Section 4</h1> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t \t <p>This section is not inside the section wrapper, so normal scrolling here!</p> 
 
\t \t </div> 
 
\t </div>