title: Change Jquery fixed div to absolute when it reaches the bottom of the page
body: <p>I have this Jquery code which what it does is to add a fixed class to a div when scrolling down.</p>
  
  <p>Now what I'm trying to do is remove this fixed class when it reaches the bottom of the page and add a new one with <code>position:absolute;</code> and <code>margin-bottom:200px;</code> to avoid this box from being above the footer at the bottom of the page when it finishes scrolling.</p>
  
  <p>You can see it here on the JsFiddle file to understand better what I'm trying to accomplish: <a href="http://jsfiddle.net/hcb4v21r/" rel="nofollow">http://jsfiddle.net/hcb4v21r/</a></p>
  
  <pre><code>$(document).on("scroll",function(){
      if($(document).scrollTop()&gt;150){ 
          $("#item-nav").addClass("fixedProfileNav");
          }
      else{
          $("#item-nav").removeClass("fixedProfileNav");
          }
      });
  </code></pre>
  
  <hr>
  
  <p>I thounght that If I do something like this it would do the job but it doesn't work:</p>
  
  <pre><code>$(document).on("scroll",function(){
          if($(document).scrollTop()&gt;80%){ 
              $("#item-nav").removeClass("fixedProfileNav");
              }
          else{
              $("#item-nav").addClass("fixedProfileNavBottom");
              }
          });
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.fixedProfileNavBottom{
      position:absolute;
      margin-bottom:200px;
  }
  </code></pre>
  
  <p>Something like removing the fixed class when it gets on 80/90 percent of the page but I don't know if this is the correct way to do it</p>