Question

让我们展示一下这个网站： -

但是，当我们滚动页面时...页脚会消失并在滚动停止时重新出现..有没有办法我们可以将它固定在屏幕上一直显示你滚动？

我该怎么做。

thankx

Answer 1

尝试此示例可以帮助you.user bottom:0px;将页脚放在页面底部。

<强> HTML

<div class="footer">Test Footer</div>

<强> CSS

.footer{
    position:fixed;
    padding-bottom:-10px;
     bottom:0px;
    background-color:red;
}

Fiddle

JQUERY Edit-1

 $(function(){
          //Keep track of last scroll
          var lastScroll = 0;
          $(window).scroll(function(event){
              //Sets the current scroll position
              var st = $(this).scrollTop();

              //Determines up-or-down scrolling
              if (st > lastScroll){
                $(".footer").css("display",'inline')
              } 
              if(st == 0){
                $(".footer").css("display",'none')
              }
              //Updates scroll position
              lastScroll = st;
          });
        });

当页面加载时，页脚会自行隐藏，当你scolldown时它将显示在底部直到滚动顶部。 Demo

Answer 2

你可以尝试

footer{
   position:fixed;
   left:0;bottom:0;
}

Answer 3

see here

使用此css：

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

并指定页脚的页脚div。

Answer 4

你不能用css禁用这个div，因为它用jquery控制我检查你的代码你必须禁用这部分代码但我不能说你如何删除它你的代码gziped
最好将#infinite-footer ID更改为#infinite-footer1并在css中设置此代码：

#infinite-footer1 {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 10px solid #D0D0D0;
    z-index: 9999;
    bottom: 0px;
    position: fixed;
    right: 0;
    width: 100%;
}

祝你好运

Answer 5

假设您的页脚

<div id="footer">

</div>

OR

<table>
   <tr id="footer">
      <td>

      </td>
   <tr>
</table>

您可以使用像----

这样的CSS

#footer
  {
  position:fixed; /* position:fixed will make the div or table row fixed */
  bottom:0px; /* This defines the position */
  left:0px; /* This also defines the position */
  z-index:199;
  width:100%;
  height:100px; /* You can change the height as you want */
  }

有些浏览器根本不支持css但熟悉JavaScript你可以使用----

<script language="javascript">

    function fixedFooter()
    {
    if (document.all) Offset=document.body.scrollTop; 
    else Offset=window.pageYOffset;
    document.getElementById('footer').style.top=Offset+'px';
    }

    setInterval('fixedFooter()',100);

</script>

如果您希望在向下滚动时必须显示

请记住，这是JQuery

<script language="javascript">

$(document).scroll(function () 
  {
  var position = $(this).scrollTop();
  if (position > 800) 
     {
     $('.footer').fadeIn();
     } 
  else 
     {
     $('.footer').fadeOut();
     }
  });    

</script>

Jquery：滚动时如何设置固定页脚

5 个答案: