html - 向上或向下滚动时如何显示和隐藏页脚(文本)？

Question

一旦我们向下滚动，我几乎尝试了 HTML 中的所有内容来隐藏页脚，但它失败了。我尝试使用的代码是:

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

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

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

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

Answer 1

为此，您需要使用 scrollTop() 功能，如下例所示:

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

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

	#footer {
		width:100%;
	}


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

<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>