0

这段代码按我的预期完美运行，但问题是当我刷新页面时 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 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 加上我们试图执行的代码。

4

1 回答 1

2

你设置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-13T02:43:34.943 回答