How to make a floating menu after scrolling past a specific point?

Question

I want to make four menu tabs after scrolling past a specific point (for example: 1000 pixels) on a page. I want them to slide from left to right when they appear. This is what I am going to, but on the left side of the browser. Any input is appreciated.

Answer 1

First, you'll want to start by tracking page scrolling. Secondly, you will want to animate the separation from left to right when necessary. To do this, you need to use the scroll function and several others for the animation part.

Here is the base for what you want, without scrolling.

 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 want to run this function while scrolling the user using:

 $(window).scroll(function () { slider(); }); 

And finally, you also want to call the function when the user first arrives, if the user starts halfway down the page using:

 $(document).ready(function () { slider(); }); 

A few words to note :

I hardcoded the width of the sliders to 200 pixels, and the starting point is 100 pixels. The stop() function is very important and stops the animation function from redundancy.

This is where jsfiddle works with related CSS

Answer 2

This is a pretty common starting point:

 $(function() { $(window).scroll(function() { var topHeight = $('#element').height(); var scroll = $(window).scrollTop(); if (scroll >= topHeight) { $(".floating-menu").addClass("show"); } if (scroll < topHeight) { $(".floating-menu").removeClass("show"); } }); }); 

Suppose the menu is called .floating-menu , and it defaults to display:none; .

The topHeight variable can be set as the height of the element (as shown, for example, the main navigation / banner area), or it can be (window).height(); for a crease, or it could be a static value.

Then, when the scroll value is greater than topHeight, a show class will be added. CSS using display:block;

Answer 3

You must keep track of the scroll position of the window when the user scrolls 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 } });