Question

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

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

HTML CODE

<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 CODE

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

Javascript结果与css不符合预期

1 个答案: