title: JQuery resize only works when starting in full screen
body: <p>I am not very good at JQuery so I was hoping anybody here could help me.</p>
  
  <p>I created this small JQuery script to change the <code>position</code> of a div upon resizing the window. However it only works when starting at full screen. </p>
  
  <p>Should I refresh the page when the window is resized, and then resize to a bigger window, the JQuery doesn't work. I have to refresh the page at full screen to get it working again. So it only works on the way to, but not on the way back.</p>
  
  <p>To show what I mean, here's a <a href="http://jsfiddle.net/bwqqvaow/1/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>If you start at a big screen, you don't see a scrollbar in <code>#rightsection</code>.</p>
  
  <p>Resize the JSFiddle Result window, and press 'Run' when the <code>#rightcontent</code> falls below the <code>#leftsection</code>. When you make the Result window bigger, the scrollbar inside the <code>#rightsection</code> appears.</p>
  
  <p>If anybody can help me with this, I'd appreciate it.</p>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$(document).ready(function() {
      $.fn.hasScrollBar = function() {
          return this.get(0).scrollHeight &gt; this.height();
      }
  
      if($("#rightsection").hasScrollBar()){
          $('#rightsection').css({
              "position":"static",
              "margin":"-75px 0 -55px 150px"
          });
      }
  
      $(window).resize(function(){
          var w = $(window).width();
          /*Making the screen smaller*/
          if(w &lt; 960){ 
              $('#rightsection').css({
                  "margin":"0"
              });
          }
  
          /*Making the screen bigger*/
          if(w &gt; 960){ 
              $('#rightsection').css({
                  "margin":"-75px 0 -55px 150px"
              });
          }
      });
  });
  </code></pre>