Fix an element between two points when scrolling the page

Question

I have an HTML structure like this below.

<div class="row-fluid" id="searchResults">
  <div id="results" style="width: 60%; float:left;">
    <div id="resultsproperty">&nbsp;</div>
    <div class="pagination"></div>
  </div>
  <div id="mapmask" style="widht: 40%; float: right;">
    <div id="map" ></div>
  </div>

</div>

There is a Google map loading into the div element with the id of map, the div element with the id of resultsproperty has content loading in as a result of ajax (jQuery).

The element with the pagination class also loads from the ajax request. Above and below this structure is a page header and footer.

I have been trying unsuccessfully to get the map to follow the scrolling of the content; I've used many different guides and can't get it to work.

The map element will be sized correctly for the viewport, lets say for the sake of discussion, 500px, the content in the results element can be 1000px, when the page is scrolling either up or down, I would like the map to remain fixed in position, until it hits the top, or the bottom bounds of the resultsproperty element.

@Greg I used a solution posted here http://stackoverflow.com/questions/5902822/stopping-fixed-position-scrolling-at-a-certain-point — Deano, Aug 26 '16 at 16:39
Can you post the JavaScript calling the `followTo` function? — Greg Burghardt, Aug 26 '16 at 16:51
@GregBurghardt - i have since removed the code that called that function. This plug-in has the functionality I'd like to achieve. https://bigspotteddog.github.io/ScrollToFixed/ although id prefer to do it without a plug-in — Deano, Aug 26 '16 at 17:11
@RamenChef my apologies for my lack of abilities spelling, thank you for correcting my mistakes. — Deano, Aug 26 '16 at 17:13

Fix an element between two points when scrolling the page

0 Answers0