Question

I’m trying to simulate what Yelp does with their Mo Map.

I know how to get an flip an element to fixed position once it reaches a certain screen scroll position, but how do you turn off fixed position once it hits the bottom of a relative container?

The css sticky position solves this, but since its fairly new, it doesnt have great coverage.

Answer 1

You can try doing something like this: little link.

Here’s a commented version of the JavaScript: (note: this uses jQuery, but it isn’t necessary. If you need a plain JavaScript version I’d be glad to provide some hints)

var oritop = -100;
$(window).scroll(function() { //on scroll,
    var scrollt = window.scrollY; //get the amount of scrolling
    var elm = $(".box"); //get the box we want to make sticky
    if(oritop < 0) {
        oritop= elm.offset().top; //cache the original top offset
    }
    if(scrollt >= oritop) { //if you scrolled past it,
        elm.css({"position": "fixed", "top": 0, "left": 0}); //make it sticky
    }
    else { //otherwise
        elm.css("position", "static"); //reset it to default positioning
    }
});