當頁面在jquery中向下滾動時隱藏內容

Question

我有一個內容DIV被固定在頁面底部。

這是HTML和CSS是這樣的：

<div class="footer-fix"> 
    <p>This is its contents......</p> 
</div> 

.footer-fix { 
    background: rgba(255,255,255, 0.6); 
    display: block; 
    position: fixed; 
    bottom: 0; 
    z-index: 999; 
    width: 100%; 
    padding: 12px; 
    border-top: 1px solid #fff; 
    box-shadow: 0px 0px 10px rgba(0,0,0,.3); 
} 

我的問題是，現在我需要隱藏，當頁面滾動至底部或接近頁面底部的這個固定條。

這是我嘗試了jQuery中：

$(document).ready(function() { 
    var footer = $('.footer-fix'); 
    $(window).scroll(function() { 
     if($(window).scrollTop() + $(window).height() > $(document).height() - 100) && footer.is(':visible')){ 
      footer.stop().fadeOut(300); 
     } 
     else if($(window).scrollTop() < $(document).height() - 100 && footer.is(':hidden')){ 
      footer.stop().fadeIn(300); 
     } 
    }); 
}); 

但是這不是爲我工作。有人可以告訴這是什麼問題嗎？

希望有人可以幫助我。謝謝。

Answer 1

缺少(，)各地($(window).scrollTop() + $(window).height() > $(document).height() - 100)在if條件

$(document).ready(function() { 
 
    var footer = $('.footer-fix'); 
 
    $(window).scroll(function() { 
 
    if (($(window).scrollTop() + $(window).height() > $(document).height() - 100) 
 
     && footer.is(':visible')) { 
 
     footer.stop().fadeOut(300); 
 
    } else if (($(window).scrollTop() < $(document).height() - 100) 
 
       && footer.is(':hidden')) { 
 
     footer.stop().fadeIn(300); 
 
    } 
 
    }); 
 
});

body { 
 
    height: 520px; 
 
} 
 
.footer-fix { 
 
    background: rgba(255, 255, 255, 0.6); 
 
    display: block; 
 
    position: fixed; 
 
    bottom: 0; 
 
    z-index: 999; 
 
    width: 100%; 
 
    padding: 12px; 
 
    border-top: 1px solid #fff; 
 
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div class="footer-fix"> 
 
    <p>This is its contents......</p> 
 
</div>

Answer 2

我不知道爲什麼你.stop()

也嘗試改變if, else if到if, else和修復語法錯誤 -

$(document).ready(function() { 
    var footer = $('.footer-fix'); 
    $(window).scroll(function() { 
     if(($(window).scrollTop() + $(window).height()) > ($(document).height() - 100) && footer.is(':visible')){ 
      footer.fadeOut(300); 
     } 
     else { 
      footer.fadeIn(300); 
     } 
    }); 
});