Position sticky not working

I am using a real estate plugin on a site. The search page spits out a map and a list of properties.

The map is supposed to use “position:sticky” so that the map fills the viewport and then the properties scroll independently until the last property on the list.

However, with the theme I am using, the map section does not seem to “stick” where it should.

Here is a url. You might have to zoom the map out and clear out the Zip code.

You commented out the height:100% from .website-wrapper so either re-instate the height:100% or instead remove the overflow:auto as well as the height.

e.g.


.website-wrapper {
    width: 100%;
    /* height: 100%; */
    /* overflow: auto; */
}

The best option is to remove the height and the overflow unless you have a specific reason for the overflow on the wrapper.

That will then allow your map to become sticky while the right content scrolls along.

1 Like