How to hover a Fixed element until it reaches some point

Question

I\'ve got a div which I need to be fixed to the bottom of the screen, until it reaches some point after scrolling and stop there and stay. If a user start scrolling back up - ma

Answer 1

I had a similar issue with a site. I had a div container that had two columns. A right column that contained long text based articles. In the left column was a div navigation list that contained anchor links to each text article in the right column. I wanted the navigation to scroll with the page. However, it shouldn't go above the texts, or below them. I wrote the following function for it:

HTML:

     
Right column of long texts
     
Left Column navigation that scrolls with page


JS Function:
function shift_text_nav() {
     var top = $(window).scrollTop();
     var t = $('#texts-container').offset().top;
     var left = $('#texts-container').offset().left;
     if (top > (t)) {
          var text_height = $('#texts').height();
          var nav_height = $('#texts-sidebar').height();

          if(t + text_height - nav_height  - 40< top){
               $('#texts-sidebar').css({'position':'absolute','top': (text_height - nav_height) + 'px','left':'0px'});
          }else{
               $('#texts-sidebar').css({'position':'fixed','top':'40px','left':left+'px'});
          }
     } else {
          $('#texts-sidebar').css({'position':'absolute','top':'40px','left':'0px'});
     }
}

$(window).scroll(function() { shift_text_nav(); });
$(window).resize(function() { shift_text_nav(); });
shift_text_nav();