How to make a floating menu appear after you scroll past a certain point? [duplicate]

Question

This question already has an answer here:

• Make a div appear when scrolling past a certain point of a page 3 answers

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.

Answer 1

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

Answer 2

This is a pretty general 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");
            }

    });
});

Assume the menu is called .floating-menu, and it has a default display:none;.

The variable topHeight can be set to be an element's height (as shown, for example the main navigation / banner area), or it could be (window).height(); for "the fold", or it could be a static px value.

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

Answer 3

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
    } 
});