Join the Voxel Guide Community!

Get Involved

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

Chat Toggle
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Voxel Guide AI
Ask me anything about Voxel!
Send
Powered by AI24