Question

我正在尝试为我的网页制作一个粘性页脚，我发现一些CSS确实将页脚保持在底部，但有一些缺点。 1，如果你继续向下滚动页面，页面会变得越来越大（这完全出乎意料，不知道是什么导致了这一点）。 2它以一个不稳定的动作向下移动，如stop..go..stop..go。是否有任何调整或不同的代码可能允许平滑移动粘性页脚留在页面底部？

顺便说一句，这段代码是oringaly的静态菜单，我只是将它改编成粘性页脚

这是javascript代码，

<script type="text/javascript">
  // attribute added inline inside tag)

    var staticmenuids=["staticmenu"]

    var staticmenuoffsetY=[]

    function getmenuoffsetY(){
for (var i=0; i<staticmenuids.length; i++){
    var currentmenu=document.getElementById(staticmenuids[i])
 staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 :   
          parseInt(currentmenu.style.top))
       }
      initstaticmenu()
    }

 function initstaticmenu(){
   var iebody=(document.compatMode &&  
   document.compatMode!="BackCompat")?  
   document.documentElement : document.body
   var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
   for (var i=0; i<staticmenuids.length; i++)
         document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px");

       setTimeout("initstaticmenu()", 5)
    }

   if (window.addEventListener)
      window.addEventListener("load", getmenuoffsetY, false)
   else if (window.attachEvent)
      window.attachEvent("onload", getmenuoffsetY)
 </script>

CSS：

.wireframemenu{
width: 99%;
height:60px;
position: absolute;
}


html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

现在粘性页脚：

<div id="staticmenu" class="wireframemenu" style="top: 520px;">
</div>

Answer 1

查看Problem with CSS Sticky Footer implementation

Answer 2

你只需一个粘性页脚就不需要任何javascript。只需看看我在我的某个网站上使用的粘性页脚：Link in sticky footer not clickable in Firefox and Chrome

Answer 3

自切片面包以来最好的事情：http://www.cssstickyfooter.com/

粘性页脚帮助！

3 个答案: