如何显示和隐藏页脚(文本)向上或向下滚动时?
问题描述:
我试过几乎所有的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>
答
对于需要使用像例如下面的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>
做的一切都是如上述的代码,但仍具有与该脚本'code' 'code'每当我把我所有的内容去隐藏 – Niraj
好了,然后看到这[Fiddel](https://jsfiddle.net/42gv9qu6/10 /) –
我只是删除jQuery和改变CSS中的一些代码,现在它的工作谢谢你这么mych求助 – Niraj