One Page Scroll For an Overlay

[lestergonzales]

How to do an overlay like on this site: http://marcosilva.co.uk/7 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

[bartekkustra (Bartosz Kustra)]

Hey there,

Try adding this to your custom code in site dashboard:

Before </head>:

<style>
	.stopscroll { overflow: hidden; }
</style>

Before </body>:

<script>
	$(document).ready(function() {
		$('.overlay-class').on("scrollstart",function(){
			$('body').addClass('stopscroll');
		});
		$('.overlay-class').on("scrollstop",function(){
			$('body').removeClass('stopscroll');
		});
	});
</script>

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.

[lestergonzales]

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.