title: add remove class on scroll at specific point rather than pixel
body: <p>I need to remove and add a class at a specific point on a page but that point is different on each page so "if (scroll >= 300)" doesn't work for all pages. Is there a way to do this based on scroll to a section id?</p>
  
  <pre><code>$(function() {
  //caches a jQuery object containing the content element
  var content = $(".isi-fixed");
  $(window).scroll(function() {
      var scroll = $(window).scrollTop();
  
      if (scroll &gt;= 300) {
          content.removeClass('isi-fixed').addClass("isi");
      } else {
          content.removeClass("isi").addClass('isi-fixed');
      }
  });
  </code></pre>
  
  <p>My css is</p>
  
  <pre><code>.isi-fixed {
  width: 100%;
  height: 20%;
  bottom: 0px;
  right: 0px;
  padding: 50px;
  opacity: 0.5;
  overflow-y: scroll;
  visibility: visible;
  display: block;
  z-index: 500 !important;
  position: fixed;    
  background-color: #E7E7E7;
   }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.isi {
  width: 100%;
  padding: 50px;
  visibility: visible;
  position: relative;
  background-color: #E7E7E7;
   }
  </code></pre>