このコードは期待どおりに完全に機能しますが、問題は、ページを更新すると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 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を使用したくありません。だからplsはそれを提案しないでください。私が jQuery を好きではない理由は、すでに 90kb と実行しようとしているコードが必要だからです。