title: Change css positioning using javascript
body: <p>This code works perfectly as i expected but the problem is when i refresh the page the t_con stays in absolute which should be fixed and when i resize the window less than 980px it is in absolute like what i need and if i resize again more than 980px it goes fixed. </p>
  
  <p>i need it to stay fixed from start. I dont know why it is in absolute at first.</p>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;div id="t_con"&gt;
  &lt;div id="t"&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE</p>
  
  <pre><code>#t_con{
  width:100%;
  position:absolute;
  top:0;
  }
  #t{
  margin:0px auto 0 auto;
  background-color:#976398;
  width:980px;
  height:30px;
  }
  </code></pre>
  
  <p>Javascript CODE</p>
  
  <pre><code>window.onresize = function(){
  var pos = window.outerWidth &lt; 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 &lt; 980){
  header.style.position="absolute";
  }else{
  header.style.position="fixed";
  }
  }
  </code></pre>
  
  <p>Can anyone tell what i am doing wrong in here. And i don't want to use jQuery for this.
  So pls dont suggest it. The reason i dont like jQuery is it already takes 90kb plus the code we are trying to execute.</p>