How to make a floating menu appear after you scroll past a certain point?
JonnyBravo’s Questions:
I want to make four menu tabs appear after you scroll past a certain point (ex: 1000px) on the page. I want them to slide in from left to right when they appear. This is what I’m going for, but on the left side of the browser. Any input is appreciated.
First you’re going to want to start by tracking the scrolling of the page. Second you’re going to want to animate the divide from left to right when needed. To do this, you’ll need to use the scroll function, and a few others for the animating part.
Here’s a base to what you want, without the scroll.
function slider() {
if (document.body.scrollTop > 100) //Show the slider after scrolling down 100px
$('#slider').stop().animate({"margin-left": '0'});
else
$('#slider').stop().animate({"margin-left": '-200'}); //200 matches the width of the slider
}
Now you’ll want to fire this function while the user scrolls, using:
$(window).scroll(function () {
slider();
});
And finally, you’ll also want to call the function when the user first arrives, incase the user starts half way down the page, using:
$(document).ready(function () {
slider();
});
A few things to note:
I’ve hard coded the sliders width to 200px, and the start point to 100px.
The stop() function is very important and stops the animate function from being called redundantly.
Here’s a working jsfiddle with the matching CSS
You have to monitor the scroll position of the window as the user scrolls through the page.
Here is a basic explanation:
$(window).scroll(function() {
//This gives the scroll position
var scrollTop = $(window).scrollTop();
if(scrollTop >= 1000) {
//If user has scrolled about 1000 px below then
// .... Your code to bring the links from left to right
}
});
