One Page Scroll For an Overlay

How to do an overlay like on this site: under “Work Section” when you click a project an overlay pops up with a nice scroll. I tried to do it, but whenever I add an overlay I end up having two scrolls, one for the background and one for the overlay, and then when I scroll the page, the background also scrolls down, how to get only one scroll and the back page would be fix like the one on link above? Thanks

Hey there,

Try adding this to your custom code in site dashboard:

Before </head>:

	.stopscroll { overflow: hidden; }

Before </body>:

	$(document).ready(function() {

That should do the trick. Notice that you have to change the .overlay-class to whatever is your modal overlay class ;) Notice: I haven’t tested it.

1 Like

Tried it but doesnt help, do you have an option by adding the interaction with this script? I add an interaction which when click the button a page will popup covering the page with scroll and hiding the body scroll.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.