title: Flickering Sidebar on Scroll
body: <p>I have a sidebar that continually checks the users scrollposition and depending on their position, changes the background image of a specific image on a sidebar when needed to indicate which section on the page is being viewed. When viewing this sidebar locally, I see the sidebar flicker. </p>
  
  <p>After uploading it to my site and viewing it there, the flickering stopped, but just in case, I wanted to know if anyone knows why and how to stop it. My website where the sidebar can be viewed in action (it's the sidebar on the left with number 1,2,3, and 4) is <a href="http://tsawebmaster1.hhstsa.com/nationals_website/blinker.html" rel="nofollow">here</a>. My code is below.</p>
  
  <pre><code>$(document).scroll(function() {
  var greenheight = document.getElementById('welcome_logo').offsetHeight;
  var redheight = document.getElementById('slideins').offsetHeight;
  var blueheight = document.getElementById('section_overview').offsetHeight;
  var yellowheight = document.getElementById('howsiteworks').offsetHeight;
  
  if($(window).scrollTop() &gt; redheight){
      if (navslide != 2) {
      if($(window).scrollTop() &lt; greenheight+redheight){
          $('#side2').css("background-image", "url(images/sidebar/side2_over.fw.png)");
          $('#side1').css("background-image", "url(images/sidebar/side1.fw.png)");
          $('#side3').css("background-image", "url(images/sidebar/side3.fw.png)");
          $('#side4').css("background-image", "url(images/sidebar/side4.fw.png)");
          var navslide = 2
      }
      }
  }
  
  if($(window).scrollTop() &lt; redheight)
  if (navslide != 1) {
  {
          $('#side1').css("background-image", "url(images/sidebar/side1_over.fw.png)");
          $('#side2').css("background-image", "url(images/sidebar/side2.fw.png)");
          $('#side3').css("background-image", "url(images/sidebar/side3.fw.png)");
          $('#side4').css("background-image", "url(images/sidebar/side4.fw.png)");
          var navslide = 1
  }
  }
  
  if($(window).scrollTop() &gt; redheight+greenheight){
      if (navslide!=3) {
      if($(window).scrollTop() &lt; greenheight+redheight+blueheight){
          $('#side3').css("background-image", "url(images/sidebar/side3_over.fw.png)");
          $('#side1').css("background-image", "url(images/sidebar/side1.fw.png)");
          $('#side2').css("background-image", "url(images/sidebar/side2.fw.png)");
          $('#side4').css("background-image", "url(images/sidebar/side4.fw.png)");
          var navslide = 3
      }
      }
  }
  
  if($(window).scrollTop() &gt; redheight+greenheight+blueheight){
      if (navslide!=4) {
      if($(window).scrollTop() &lt; greenheight+redheight+blueheight+yellowheight){
          $('#side4').css("background-image", "url(images/sidebar/side4_over.fw.png)");
          $('#side1').css("background-image", "url(images/sidebar/side1.fw.png)");
          $('#side2').css("background-image", "url(images/sidebar/side2.fw.png)");
          $('#side3').css("background-image", "url(images/sidebar/side3.fw.png)");
          var navslide = 4
      }
      }
  }
  
  });
  </code></pre>