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

jQuery Waypoints is an excellent plugin to achieve things like this: Demo of fixed div after scrolling

Answer 2

$(window).scroll(function() {
    checkPosition('#myelement');
});

function checkPosition( element ){
//choose your limit
var positionLimit = 416;
var y = getOffsetY();

if( y <= positionLimit ){
    $(element).css({'position':'fixed','bottom':'0'});
}
else{
    $(element).css({'position':'relative'});
}
}

//for browser compatibility

function getOffsetY(){

var  scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
    } else if( document.body && ( document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
    } else if( document.documentElement && (  document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
    }

return scrOfY;
}

This should be work. To get y offset of the element you'd have to use a function in order to have browser compatibility. All you have to do is set the correct limit position.

Answer 3

$(window).scroll(function(){
  if($(this).scrollTop() < $(document).height() -1000){
    $(selector).css("position", "fixed");
    $(selector).css("bottom","0");
  }
  else
  {
    $(selector).css('bottom', "81px");
  }
});

I tried this code and it works for $(document).height() -500 ). But for some reason i can't understand it does not work when the value 500 is decreased to 100 or 81.

Try changing this value and see the difference

Answer 4

Sorry for resurrecting the "dead", but I came across this question with the same question and thought I'd share the solution I came up with. In my case, I have images (#rm_gutter_left and #rm_gutter_right) on either side of a center aligned fix width site and a fluid width header and footer. You could adjust it to only be for one element or use a class, of course.

Hope this helps someone else.

// Height and footer settings
var rm_header_height = 67; // px
var rm_footer_height = 200; // px

// Store so jquery only has to find them once
var rm_gutters = $("#rm_gutter_left, #rm_gutter_right");

// Set initial gutter position
rm_gutters.css("top", rm_header_height + "px");

// Attach to window's scroll event
$(window).scroll(function() {
    st = $(this).scrollTop();
    h = $(document).height() - $(window).height();

    // Is the header still in view?
    if (st < rm_header_height) {
        rm_gutters.css({"top": rm_header_height + "px", "bottom": "auto"});

    // Are neither the footer or header in view?
    } else if (st < h - rm_footer_height) {
        rm_gutters.css({"top": 0, "bottom": "auto"});

    // Is the footer in view?
    } else {
        rm_gutters.css({"top": "auto", "bottom": rm_footer_height + "px"});
    }
});

Answer 5

There are two ways to go about it:

• either go with an absolute pos, and compensate for every scrollbar movement below a certain level
• or go with a fixed pos, and compensate above a certain level.

In both case, what you need is "a linear curve with a dent" regarding "position value over scroll value". The best to achieve this are the Math.min/max functions. Hint: The fixed approach is less wobbly for the standstill-part. Unless you need IE6 support (which knows no fixed), go with the #fix solution.

<style type="text/css">
body { 
    height:1000px;  /* create something to scroll*/
    border-left: 20px dotted blue; /* and something fancy */
}

#abs { position:absolute; top: 200px; left:100px; background-color:#FCC; }
#fix { position:fixed;    top: 200px; left:200px; background-color:#CCF; }      
</style>

<div id="abs">Absolute</div>          <div id="fix">Fixed</div>

<script type="text/javascript"> <!-- have jQuery included before -->
    $(window).scroll( function () {
        $('#abs').css('top', 200 + Math.min( 150, $(window).scrollTop() ));
        /* read: up to 150, compensate scrolling,
                    then stick with a fixed value (scroll along) */

        $('#fix').css('top', 200 - Math.max( 0 , $(window).scrollTop() - 150 )); 
        /* read: do nothing in the interval [0;150] */
    });         
</script>

Answer 6

$(window).scroll(function () {
    if ($(this).scrollTop() < $(document).height() - 81) {
        $('#bottom_pic').css("position", "fixed");
        $('#bottom_pic').css('bottom', "0px");
    }
    else {
        $('#bottom_pic').css("position", "absolute");
        $('#bottom_pic').css({'top':(($(document).height())-81)+'px'});
    }
});

This will make the div fixed at bottom until its 81px away from the top. Once it reaches there, it will stay there.