title: Make fixed sidebar scroll 290px from bottom of page?
body: <p>I am trying to create a sidebar that functions like the one on Vice.com. If you scroll down, the sidebar will become fixed at a certain point, and then when the sidebar reaches a certain point near the bottom of the site, it will then continue to scroll up with the rest of the site.</p>
  
  <p>On my site, I am stuck on the second part which is getting the sidebar to continue scrolling up once it hits near the bottom. <code>290px</code> from the bottom to be exact.</p>
  
  <p>Here is what I have so far:</p>
  
  <p>JavaScript</p>
  
  <pre><code>&lt;script&gt;
  jQuery(window).scroll(function () {
      var threshold = 20;
   if (jQuery(window).scrollTop() &gt;= 20)
       jQuery('#sidebar').addClass('fixed');
   else
       jQuery('#sidebar').removeClass('fixed');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#sidebar {
    margin: 0;
    position: absolute;
    right: 0;
    width: 220px;
  }
  #sidebar.fixed {
    margin-left: 720px;
    position:fixed;
    right: auto;
    top: 173px;
  }
  </code></pre>
  
  <p>How can I make the fixed sidebar scroll up once it hits a certain point near the bottom?</p>
  
  <hr>
  
  <p>Edit #1</p>
  
  <p>Here is the updated code by Adam. I'm using a conditional statement for the pages that have a different threshold. Nothing happens when I use this code, meaning the sidebar doesn't get the <code>fixed</code> class added and therefore scrolls up normally as if the code isn't even there. Also, I get a console error on this line <code>if (scrollTop() &gt;= 236) {</code> saying that the "number is not a function".</p>
  
  <pre><code>if (jQuery(document.body).hasClass("home")) {
  
      jQuery(window).scroll(function () {
          var sidebarHeight = jQuery('#sidebar').height(),
              containerHeight = jQuery('#container').height() + 173,
              scrollTop = jQuery(window).scrollTop(),
              clientHeight = scrollTop + jQuery(window).height(),
              threshold = 654;
          if (scrollTop() &gt;= 654) {
              jQuery('#sidebar').addClass('fixed');
          } else if (containerHeight - scrollTop &lt;= sidebarHeight) {
              jQuery('#sidebar').removeClass('fixed').addClass('bottom');
          }
      });
  
  } else if (jQuery(document.body).hasClass("single") || jQuery(document.body).hasClass("page")) {
  
      jQuery(window).scroll(function () {
          var sidebarHeight = jQuery('#sidebar').height(),
              containerHeight = jQuery('#container').height() + 173,
              scrollTop = jQuery(window).scrollTop(),
              clientHeight = scrollTop + jQuery(window).height(),
              threshold = 20;
          if (scrollTop() &gt;= 20) {
              jQuery('#sidebar').addClass('fixed');
          } else if (containerHeight - scrollTop &lt;= sidebarHeight) {
              jQuery('#sidebar').removeClass('fixed').addClass('bottom');
          }
      });
  
  } else {
  
      jQuery(window).scroll(function () {
          var sidebarHeight = jQuery('#sidebar').height(),
              containerHeight = jQuery('#container').height() + 173,
              scrollTop = jQuery(window).scrollTop(),
              clientHeight = scrollTop + jQuery(window).height(),
              threshold = 236;
          if (scrollTop() &gt;= 236) {
              jQuery('#sidebar').addClass('fixed');
          } else if (containerHeight - scrollTop &lt;= sidebarHeight) {
              jQuery('#sidebar').removeClass('fixed').addClass('bottom');
          }
      });
  
  }
  </code></pre>
  
  <p>Below is the HTML structure as requested:</p>
  
  <pre><code>&lt;!-- BEGIN #masthead--&gt;
  &lt;div id="masthead"&gt;
      &lt;!-- #secondary-menu --&gt;
      &lt;div id="secondary-menu"&gt;
  
          &lt;!-- .centered-menu --&gt;
          &lt;div class="centered-menu"&gt;
              &lt;div class="latest-tweets"&gt;&lt;/div&gt;
              &lt;div id="search-bar"&gt;&lt;/div&gt;
              &lt;ul class="social-icons sf-js-enabled"&gt;&lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- /.centered-menu --&gt;
  
      &lt;/div&gt;
      &lt;!-- /#secondary-menu --&gt;
  
      &lt;!-- BEGIN #header--&gt;
      &lt;div id="header"&gt;
  
          &lt;!-- #header-inner --&gt;
          &lt;div id="header-inner" class="clearfix"&gt;
              &lt;div id="logo"&gt;&lt;/div&gt;
  
              &lt;!-- BEGIN #primary-menu --&gt;
              &lt;div id="primary-menu" class="clearfix"&gt;
  
                  &lt;!-- .left-menu --&gt;
                  &lt;div class="left-menu split-menu"&gt;&lt;/div&gt;
                  &lt;!-- /.left-menu --&gt;
  
                  &lt;!-- .right-menu --&gt;
                  &lt;div class="right-menu split-menu"&gt;
                      &lt;div class="menu-menu-right-container"&gt;&lt;/div&gt;
                  &lt;!-- /.right-menu --&gt;   
  
              &lt;!-- END #primary-menu --&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- /#header-inner --&gt;
  
      &lt;!-- END #header --&gt;
  
      &lt;!-- BEGIN #mobile-menu --&gt;
      &lt;div id="mobile-menu"&gt;
          &lt;div id="mobile-inner"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- END #mobile-menu --&gt;
  
      &lt;/div&gt;
  
      &lt;div id="categories-bar"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="masthead-space"&gt;&lt;/div&gt;
  &lt;!-- END #masthead --&gt;
  
  &lt;!-- BEGIN #wrapper--&gt;
  &lt;div id="wrapper"&gt;
  
      &lt;!-- BEGIN #page--&gt;
      &lt;div id="page"&gt;
  
          &lt;div id="main" class="clearfix"&gt;
  
              &lt;div id="container" class="clearfix"&gt;
  
                  &lt;!--BEGIN #content --&gt;
                  &lt;div id="content"&gt;
                      &lt;div id="sidebar"&gt;&lt;/div&gt;&lt;!-- #sidebar --&gt; 
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
          &lt;!--END #main --&gt;
          &lt;/div&gt;
  
      &lt;!--END #page --&gt;
      &lt;/div&gt;
  
  &lt;!--END #wrapper --&gt;
  &lt;/div&gt;
  
  &lt;!--BEGIN #bottom --&gt;
  &lt;div id="bottom"&gt;
  
      &lt;!--BEGIN #footer --&gt;
      &lt;div id="footer"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>