クリックしたときにスクロールが途中で消えるボタン

Question

私のWebページの特定のセクションに達したときにのみ表示されるボタンがあり、ユーザーがこのセクションをスクロールすると消えてしまいます。

ユーザーがボタンをクリックすると、セクションに余分な情報がポップアップします。 問題は、これがページを拡張し、セクションの最後に近いボタンが消えることです。

//App.js stuff--I'm setting a manual distance here for when the button should disappear 
 

 
$(document).ready(function() { 
 
    $("#detailButton").hide(); //hide your div initially 
 
    var dbSearch = $("#search").offset().top; 
 
    var contactPage = 4500; 
 
    $(window).scroll(function() { 
 
     if($(window).scrollTop() > dbSearch && $(window).scrollTop() < contactPage) { //scrolled past the other div? 
 
      $("#detailButton").show(); //reached the desired point -- show div 
 
     } 
 
     else{ 
 
      $("#detailButton").hide(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
//Index.html stuff 
 

 
<section id="search" class="search"> 
 
    ...//detailButton should be shown here 
 
</section> 
 

 

 
<section id="contact" class="closing-header"> 
 
...//last part of page--detailButton show be hidden here 
 
</section>

私はそれが最後のセクション（#contact）に移行したときにボタンが消えるだけであることを保証する方法が必要です。これどうやってするの？

Answer 1

スクロール機能のオフセットを計算します。

//App.js stuff 
 

 
$(document).ready(function() { 
 
    $("#detailButton").hide(); //hide your div initially 
 
    
 
    $(window).scroll(function() { 
 
     var dbSearch = $("#search").offset().top; 
 
     var contactPage = 4500; 
 
     if($(window).scrollTop() > dbSearch && $(window).scrollTop() < contactPage) { //scrolled past the other div? 
 
      $("#detailButton").show(); //reached the desired point -- show div 
 
     } 
 
     else{ 
 
      $("#detailButton").hide(); 
 
     } 
 
    }); 
 
});

//Index.html stuff 
 

 
<section id="search" class="search"> 
 
    ...//detailButton should be shown here 
 
</section> 
 

 

 
<section id="contact" class="closing-header"> 
 
...//last part of page--detailButton show be hidden here 
 
</section>