The effect I’m looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There’s been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can’t seem to get the effect to work.
The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can’t change it through Jquery’s css method or anything. So I’ve added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become’s fixed it jumps to the left and clobbers my other content.
I found a tutorial online, but it might be deprecated now? It wasn’t working.
You just needed to pick apart the specifics of what Yelp was doing a little more, I think… their column is floated as well (examine their markup… it’s
#searchLayoutMapResults), but then inside that, the div#searchLayoutMapResultsis the one that getsposition: fixedadded to it (via the classNamefixed), so it doesn’t change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.(the markup I found was based on this page)