2009-09-19 66 views
1

我想爲我的網頁製作一個粘腳,我發現了一些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> 
+0

是的遺憾,甚至沒有看那個。我的意思是javascript,謝謝。 – 2009-09-19 13:41:17

+0

爲什麼你需要粘腳?他們通常是一個滋擾,皺起了眉頭。不過,我認爲這是情景。 – 2009-09-19 13:49:38

+0

[CSS粘滯頁腳實現問題]的可能重複(http://stackoverflow.com/questions/1112082/problem-with-css-sticky-footer-plementation) – Liam 2014-02-11 11:45:46

回答