title: Reset css or script when browser is resized
body: <p>This might be hard to explain but say my browser size is small like in image 1. The bottom text is positioned where it should be and when I scroll down a script activates.</p>
  
  <p><em>EDIT</em> <a href="https://jsfiddle.net/j4f53rds/1/" rel="nofollow noreferrer">https://jsfiddle.net/j4f53rds/1/</a></p>
  
  <pre><code>function fixDiv() {
      var $div = $("#nav_color");
      var top = $div.data("top");
      if ($(window).scrollTop() &gt; top) {
          $('#nav_color').css({'position': 'fixed', 'top': '0px'}); 
      }
      else {
          $('#nav_color').css({'position': 'absolute', 'top' : top + 'px'});
      }
  }
  
  $("#nav_color").data("top", $("#nav_color").offset().top); 
  $(window).scroll(fixDiv);
  </code></pre>
  
  <p>The script causes the text on the bottom to become fixed on the top of the html as the user scrolls down. Now here comes the issue. After firing, if I resize the browser, say make it full screen, like in image two, and then scroll back up. The text doesn't reposition to it's would be new location, it resets back to the original position in the smaller browser. How do I get the script to take into account a new browser size when the user scrolls back up?</p>
  
  <p><img src="https://i.stack.imgur.com/R0Lk3.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/wRs3i.jpg" alt="enter image description here"></p>