スクロール後にdivを表示し、ページの末尾にdivを表示します

Question

1500pxをスクロールした後にdivを表示しようとしていますが、ページの90％がスクロールしているときにdivを非表示にしたいページ）。

マイコードは1500px後に表示されますが、ページの最後に達したときに非表示にする方法がわかりません。

これは私のコードです：

<style type="text/css"> 
    #sample { 
    background: #fff none repeat scroll 0 0;  
    position: fixed; 
    bottom: 0; 
    height: auto; 
    max-height:100px; 
    width: 100%; 
    z-index: 999; 
    display:none; 
    } 
</style> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).scroll(function() { 
     var y = $(this).scrollTop(); 
     if (y > 1500) { 
     $('#sample').fadeIn(); 
     } else { 
     $('#sample').fadeOut(); 
     } 
    }); 
</script> 
<div id="sample"> 
    just some content... 
</div> 

誰かが問題で私を助けることができる場合、私は非常に喜んでいるだろう。どうもありがとう。あなたはこのような何か行うことができます

Answer 1

：

var y = $(this).scrollTop(); 

if (y > 1500 && y < ($(document).height() * 0.9)) { 
    $('#sample').fadeIn(); 
} else { 
    $('#sample').fadeOut(); 
} 

Answer 2

をあなたは "90％" を計算することができます - $(window).height()と$(document).height()にスクロールします。例を参照してください：

$(function() { 
 
    $(document).scroll(function() { 
 
    var y = $(this).scrollTop(); 
 

 
    if ((y + $(window).height()) > ($(document).height() * 0.9)) { 
 
     $('#sample').fadeOut(); 
 
     return; 
 
    } 
 

 
    if (y > 1500) { 
 
     $('#sample').fadeIn(); 
 
    } else { 
 
     $('#sample').fadeOut(); 
 
    } 
 
    }); 
 
})

.content { 
 
    height: 3000px; 
 
} 
 

 
#sample { 
 
    background: #ff0000; 
 
    position: fixed; 
 
    bottom: 0; 
 
    height: auto; 
 
    max-height: 100px; 
 
    width: 100%; 
 
    z-index: 999; 
 
    display: none; 
 
}

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

 
<div class="content"> 
 
    Content 
 
</div> 
 
<div id="sample"> 
 
    sample 
 
</div>