0

このコードは期待どおりに完全に機能しますが、問題は、ページを更新すると t_con が絶対に残ることです。これは修正する必要があり、ウィンドウのサイズを 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 と実行しようとしているコードが必要だからです。

4

1 に答える 1

2

window.onresize最初の関数が呼び出されないように、2 回設定しています。

試す：

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 に答える