Floating Map Full Height of Viewport until Footer

Need help
1

Hey all

I am trying to achieve exactly what AirBnB has on their search result page: https://www.airbnb.dk/s/Costa-del-Sol--Spain/homes

  1. Map to the right which:
  • Stays fixed when scrolling the “repeating group” to the left but stops once it hits the footer
  • Takes up the full length of the screen (besides the header) independent of screen-size (but stops being full length once it reaches the footer)

I have installed BDK Floater plugin and been through the forum (and especially this one, but does not seem to work for my purpose Setting a group to be % of viewport height dynamically).

Fingers crossed for any of you knowing the answer - or can give a hint to what direction to go in.

THANKS. Maja

2

Hey Maja,

I held a training few weeks ago on how to accomplish this. See here

4 Likes
3

Thanks a lot - AWESOME webinar, really helped a lot.

I was able to reproduce what you did (map example) and it’s almost what I am looking for.

Is there any way to make the scroll bar located at the right (like when you do “ext. vertical scrolling”) AND still having the map showing full screen when scrolling down until you reach a footer? So map is fixed position all the way through.

4

Yes there is. It ultimately depends on how you page is laid out. I suggest you design the page right now and once your finished DM me and we can book a time where i can show you how to do that.

5

Appreciate all your help! Send you a DM a couple of days ago - let me know if it hasn’t reached you.

6

This topic was automatically closed after 70 days. New replies are no longer allowed.