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

*@roman , the below function triggers the scroll event* , 

you can place all your custom logic inside this/// calculating , positioning etc

$(window).scroll(function () {
    /* this function gets triggered whenever you do scroll.
       Write all your logic inside this */
});

Answer 2

I realize this is an old topic... however I needed to implement something of this nature recently. Below is the code to accomplish the task (keep in mind you may need to modify the css to get it to show in the appropriate location for your needs, mine was to dock the element at the top of the screen). Additionally, this is dependent on jQuery.

$(document).ready(function () {
    //  initialize the dock
    Dock();

    // add the scroll event listener
    if (window.addEventListener) {
        window.addEventListener('scroll', handleScroll, false);
    } else {
        window.attachEvent('onscroll', handleScroll);
    }
});

function Dock() {
    Dock.GetDock = document.getElementById('dockable');
    Dock.NewScrollOffset = getScrollOffset();
    Dock.DockBottomPos = getDockBottomPos();
    Dock.DockTopPos = getDockTopPos();
}

function getScrollOffset() {
    var scrollOffset = window.pageYOffset
                ? window.pageYOffset
                : document.documentElement.scrollTop;
    return scrollOffset;
}

function getDockBottomPos() {
    var dockTopPos = getDockTopPos();
    var dockHeight = $('#dockable').height();
    return (dockTopPos + dockHeight);
}

function getDockTopPos() {
    var dockTopPos = $('#dockable').offset().top;
    return dockTopPos;
}

function handleScroll(){
     if (window.XMLHttpRequest) {

          //  determine the distance scrolled from top of the page
          Dock.NewScrollOffset = getScrollOffset();

          if (Dock.NewScrollOffset >= Dock.DockBottomPos) {
              Dock.GetDock.className = "fixed";
              return;
          }
          if (Dock.NewScrollOffset <= Dock.DockTopPos) {
              Dock.GetDock.className = "";
          }
      }
 }

css:

#dockable
{
    position: relative;
    width: inherit;
}
#dockable.fixed
{
    position: fixed;
    top: 0px;
}

An example of a dock would be...

#dockable div
{
    display: inline;
    *zoom: 1;
    height: 25px;
    line-height: 25px;
    padding: 5px 10px 5px 10px;
}
<div id="dockable">
     <div><a href="#">Menu Item 1</div>
     <div><a href="#">Menu Item 2</div>
     <div><a href="#">Menu Item 3</div>
</div>

Answer 3

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:
<div id="texts-container">
     <div id="texts">Right column of long texts</div>
     <div id="texts-sidebar">Left Column navigation that scrolls with page</div>
</div>

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();