JS CSS

Slide In Container on Scroll

D Donald McGuinn · 274 views · Updated 2 years ago

This snippet combined with your container, will appear at the bottom (or top) of the page and slide in once the user scrolls past a certain amount of page.

Demo: https://voxel.guide/website/explore-southern-maryland/

Make sure to add the class "your-container" in the entire container CSS under advanced.

jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 350) {
$('.your-container').slideDown(); // Show the container with slideDown animation
} else {
$('.your-container').slideUp(); // Hide the container with slideUp animation
}
});
});

JS · 9 lines

.your-container{
display: none;
}

CSS · 3 lines

Discussion 1

Ask a question or share how you used this.

Steven Webster 2 years ago

This is a fun script, thanks for posting. I'm having some issues and wondered if I'm just being a blockhead. Where do the additional options show up in elementor? I don't see them. Also, I'm getting a "flicker" on pageload. Is there a way to supress that? Don't see it on your example. Thanks and keep up the good work!

Donald McGuinn 2 years ago

Under advanced on the container settings. There is a flicker, I think that can be resolved by adding the JS to the header and not using an HTML element. Maybe even the footer.

Steven Webster 2 years ago

Ureka! Had to set the container to fixed. Works well, thanks again!

Donald McGuinn 2 years ago

I just updated the snippet to fix the glitch.