Javascript 结果与 css 不一样

Question

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

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

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 加上我们试图执行的代码。

Answer 1

您将 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';
}