title: Remove Fixed Position in JavaScript after Scrolling Some Distance
body: <p>I have an  set its position to fixed on top of the page. This will make this  follows me while scrolling down to the middle of the document or page. After the middle of document, I want to stick this  in middle of document, and scoll down without it. After I scroll up again, I want it back to follow me (fixed position). </p>
  
  <p>Here is a snippet of code I am working on. </p>
  
  <pre><code>            if ($('body').hasClass('catalog-product-view')) {
  
                  if ($(this).scrollTop() &gt;= $('.product-collateral-wrapper').innerHeight()/2)
                  {
                      my div should remain in its place now. waiting for me to scoll up again to follow me
                  }else{
  have my div fixed positioned so when I scroll the page, I always see it. 
  }
  
  Here is the full function
          $(window).scroll(function() {
              if ($(this).scrollTop() &gt; offset &amp;&amp; !stickyActive) { 
                  stickyActive = true;
                  $header.addClass("sticky-active");
                  $(stickyPlaceholder).show();
                  var logo = $('&lt;li&gt;&lt;/li&gt;').append($('.main-header .logo-container &gt; a').clone()).html();
                  logo = '&lt;li class="logo-fixed"&gt;'+logo+'&lt;/li&gt;';
                  $('.main-header nav.top-bar.main-nav .top-bar-section .left').prepend(logo);
                  if ($('.top-bar-section .main-logo-sticky').length) {
                      $('.top-bar-section .main-logo').hide();
                  }
                  topbarLeftHeight = $('.main-header nav.top-bar.main-nav .top-bar-section .left').outerHeight();
              } else if ($(this).scrollTop() &lt; offset &amp;&amp; stickyActive) {
                  $header.removeClass("sticky-active");
                  $('nav.top-bar.main-nav .logo-fixed').remove();
                  $(stickyPlaceholder).hide();
                  stickyActive = false;
              }
              if ($('body').hasClass('catalog-product-view') &amp;&amp; Modernizr.mq('only screen and (min-width: 64.063em)')) {
                  setTimeout(function(){
                      $('.magellan-nav.magellan-fixed').css('margin-top',topbarLeftHeight+'px');
                  },100);
              }
  
  
  
  //HERE GOES CHANGES I AM DOING. It started to make sense how to get it working, but will this be effecient or will it have performance drawback cause of scroll event is triggered with every scroll, and same calculations will be redone again and again?
  
              if ($('body').hasClass('catalog-product-view')) {
  
  
  
                  if ($(this).scrollTop() &gt;= $('.product-collateral-wrapper').innerHeight()/2)
                      {
  //will enter code here`l toggle position and top property here based on some calculations
                      }else{
     //will toggle position and top property here based on some calculations
      }
                  }
  
  
  
  
  
              });
              $(window).scroll();
          };
  </code></pre>
  
  <p>I tried changing position from fixed to relative. This will take  back to top of page making it invisible within viewport. </p>