javascript - 使用 javascript 更改 css 定位

Question

这段代码按我的预期完美运行，但问题是当我刷新页面时 t_con 保持绝对值，这应该是固定的，当我将窗口大小调整为小于 980 像素时，它就像我需要的那样是绝对值，如果我再次调整大小超过 980 像素它修复了。

我需要它从一开始就保持固定。我不知道为什么一开始它是绝对的。

代码

<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 pos = window.outerWidth < 980 ? 'absolute' : 'fixed';
document.getElementById('t_con').style.position = pos;
}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 加上我们试图执行的代码。

Answer 1

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

小提琴

Answer 2

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