Slide In Container on Scroll

Description/Instructions

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/

If this snippet helped, feel free to buy me a taco :)

Instructions

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
Copy Code

.your-container{
display: none;
}

  • CSS
Copy Code

Let's Chat About this Snippet