如何显示和隐藏页脚（文本）向上或向下滚动时？

Question

我试过几乎所有的HTML隐藏页脚一旦我们向下滚动，但它失败。我试图使用的代码是：

.wrap { 
 
\t \t position:relative; 
 
\t \t text-align: center; 
 
\t \t margin:0 auto; 
 
       /*replace 900px with your width*/ 
 
\t \t width:900px; 
 
\t } 
 

 
\t #footer { 
 
\t \t width:100%; 
 
\t \t float:left; 
 
\t \t 
 
\t } 
 

 

 
#footer { 
 
\t \t position:absolute; 
 
\t \t width:100; 
 
\t \t bottom:0; 
 
\t \t color: white; 
 
\t \t z-index:999999; 
 
\t \t 
 
\t }

<div id="footer"> 
 
      <div class="wrap"> 
 
       <p>This would be your footer content!</p> 
 
      </div> 
 
    </div>

Answer 1

对于需要使用像例如下面的scrollTop的（）功能：

$(window).scroll(function(){ 
 
\t var sroll_val = $(this).scrollTop(); 
 
    
 
    if(sroll_val > 50 && sroll_val < 70){ 
 
    \t $('.wrap').animate({opacity:0}); 
 
    }if(sroll_val > 70 && sroll_val < 90){ 
 
    \t $('.wrap').animate({opacity:1}); 
 
    } 
 
})

body{ 
 
    
 
} 
 
.wrap { 
 
\t \t text-align: center; 
 
margin: 0 auto; 
 
width: 90%; 
 
opacity:1; 
 
\t } 
 

 
\t #footer { 
 
\t \t width:100%; 
 
\t } 
 

 

 
#footer { 
 
\t \t position:fixed; 
 
\t \t width:100; 
 
\t \t color: white; 
 
     bottom:0; 
 
     background-color:pink; 
 
\t \t z-index:999999; 
 
\t \t 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='main'> 
 
    <p>content</p><p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <p>content</p> 
 
    <div id="footer"> 
 
      <div class="wrap"> 
 
       <p>This would be your footer content!</p> 
 
      </div> 
 
    </div> 
 
</div>