Javascript結果不如預期與css

此代碼完美工作，因爲我的預期，但問題是，當我刷新頁面t_con保持絕對應該被修復，當我調整窗口小於980px時，它是絕對的像什麼我需要，如果我調整大於980px再固定。Javascript結果不如預期與css

我需要它從一開始就保持固定。起初我不知道爲什麼它是絕對的。

HTML代碼

<div id="t_con"> 
    <div id="t"> 

    </div> 
</div>

CSS代碼

#t_con { 
    width: 100%; 
    position: absolute; 
    top: 0; 
} 
#t { 
    margin: 0px auto 0 auto; 
    background-color: #976398; 
    width: 980px; 
    height: 30px; 
}

JavaScript代碼

window.onresize = function(){ 
    var header = document.getElementById('t'); 
    var window_width = document.body.offsetWidth; 
    if(window_width < 980) { 
     header.style.position = "absolute"; 
    } else { 
     header.style.position = "fixed"; 
    } 
}

誰能告訴我是什麼在這裏做錯了嗎？我不想爲此使用jQuery。所以請不要暗示它。我不喜歡jQuery的原因是它已經佔用了90kb以及我們試圖執行的代碼。

來源

2013-04-13 Kishore Kumar

你應該愛jQuery的...這是真棒，輕鬆高效.... –

你設置了window.onresize兩次，所以你的第一個函數將永遠不會被調用。

嘗試：

window.onresize = function(){    
    document.getElementById('t_con').style.position = window.outerWidth < 980 ? 'absolute' : 'fixed'; 
    document.getElementById('t').style.position = document.body.offsetWidth < 980 ? 'absolute' : 'fixed'; 
}

來源

2013-04-13 02:43:34 louisbros

我編輯我的代碼。我有另一個問題，如果我禁用JavaScript我需要刷新頁面，使其絕對像我的CSS。有沒有辦法做到這一點，而不刷新頁面？ –

何你禁用你的JavaScript？你的意思是刪除事件處理程序？ – louisbros

在瀏覽器中禁用JavaScript。某些用戶將禁用其JavaScript。對他們來說，它應該是絕對沒有頁面刷新。 –

Javascript結果不如預期與css

回答

相關問題