[How To] Trigger A Lightbox On Scroll


Want to make sure you’re lightbox content gets shown to a visitor? Now you can! This script will open a lightbox after a visitor scrolls a certain amount down the page. Good for triggering that video or opt-in form at an opportune moment.

You can see this in action (built in Unbounce) here:

How to Install in Unbounce

Click Here for Instructions

:rotating_light: WARNING: YOU ARE ENTERING DEVELOPER TERRITORY :rotating_light:
This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

Step 1.

Add the script from here: https://gist.github.com/RobertCam/7bebd9447c560fe3f9e9da9f10b63815

Step 2.

Change the ID in the script to match the ID of the lightbox button on your page.

Step 3.

Add the amount of scroll before the lightbox triggers.

Boom! Done!

Want to take your Unbounce landing pages + Convertables™ to the next level?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

The Ultimate List of Unbounce Tips, Scripts & Hacks
The Ultimate List of Unbounce Tips, Scripts & Hacks

Beauty @Rob! Keep 'em coming! :gif_master:


@Rob This is awesome! For some reason it’s not working on my pages - do know why this might be? http://unbouncepages.com/genesys-lp-2/


Hi @mclopezz could you try unchecking the “jquery.fancybox (1.3.4)” checkbox in the javascript section and moving the script placement to “head” for the page and see if that works to fix it.


@Rob done! Still not working unfortunately - let me know if you see anything else that may be affecting it! And thank you for your help!


This code does not seem to be working for me anymore.