title: How to get div to remain fixated until jquery actiavtes
body: <p>I have a navigation bar inside a header which snaps to the top of the screen once you scroll over 100px downwards. The functionality is fine but I would like the navigation bar to remain fixed on the right until the snap, so essentially, the navigation bar needs to remain in a fixed position until you scroll past 100px..</p>
  
  <p>Please visit <a href="http://www.justletmeusethisnameplz.co.nf/index%20stacky.html" rel="nofollow">http://www.justletmeusethisnameplz.co.nf/index%20stacky.html</a> to see my website.</p>
  
  <p>Thanks</p>
  
  <p>Here is the relevant HTML</p>
  
  <pre><code>&lt;div class="header"&gt; &lt;!-- BEGINNING OF HEADER --&gt;
  
      &lt;div id="logo"&gt; &lt;!-- BEGINNING OF LOGO --&gt;
  
      &lt;h1 class="sliding-middle-out"&gt;Hi&lt;/h1&gt;
  
      &lt;/div&gt; &lt;!-- END OF LOGO --&gt;
  
      &lt;div id="navigation"&gt;  &lt;!-- BEGINNING OF NAVIGATION --&gt;
  
      &lt;div style="float:right"&gt; &lt;!-- BEGINNING OF IDK --&gt;
  
      &lt;div id="slider"&gt;&lt;/div&gt;
      &lt;a href="index.html"&gt;&lt;div id="one" class="item"&gt;&lt;div class="inside"&gt;Home&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;a href="about.html"&gt;&lt;div id="two" class="item"&gt;&lt;div class="inside"&gt;About Us&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;a href="content.html"&gt;&lt;div id="three" class="item"&gt;&lt;div class="inside"&gt;Content&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
      &lt;a href="contact.html"&gt;&lt;div id="four" class="item"&gt;&lt;div class="inside"&gt;Contact&lt;/div&gt;&lt;/div&gt;&lt;/a&gt;
  
      &lt;/div&gt; &lt;!-- END OF IDK --&gt;
  
      &lt;/div&gt; &lt;!-- END OF NAVIGATION --&gt;
  
      &lt;/div&gt; &lt;!-- END OF HEADER --&gt;
  </code></pre>
  
  <p>Here is the relevant CSS</p>
  
  <pre><code>.header{
          height:100px;
          width:960px; 
          float:left;
          background-color:white;
        }
        #navigation{
          height:40px;
          font-size:20px;
          color:black;
          font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
          float:right;
          background-color:white;
          padding-top:5px;
          position:relative;
        }
        #navigation.stick{
          height:40px;
          font-size:20px;
          color:black;
          font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
          float:left;
          background-color:white;
          padding-top:5px;
          position:fixed;
        }
        .logo{
          height:100px;
          width:425px; 
          float:left;
        }
  </code></pre>
  
  <p>Here is the relevant JavaScript/ JQuery</p>
  
  <pre><code>&lt;script type="text/javascript" src="./jquery-2.1.4.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="./jquery-latest.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  $(document).on("scroll", function(){
      if($(document).scrollTop() &gt; 1){
      $('#navigation').addClass("stick");
      }else{
      $('#navigation').removeClass("stick");
      }
  });
  &lt;/script&gt;
  </code></pre>