jquery - How to make a floating menu appear after you scroll past a certain point? -

this question has answer here:

• make div appear when scrolling past point of page 3 answers

i want make 4 menu tabs appear after scroll past point (ex: 1000px) on page. want them slide in left right when appear. i'm going for, on left side of browser. input appreciated.

first you're going want start tracking scrolling of page. second you're going want animate divide left right when needed. this, you'll need use scroll function, , few others animating part.

here's base want, without scroll.

function slider() {     if (document.body.scrolltop > 100) //show slider after scrolling down 100px         $('#slider').stop().animate({"margin-left": '0'});     else         $('#slider').stop().animate({"margin-left": '-200'}); //200 matches width of slider } 

now you'll want fire function while user scrolls, using:

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

and finally, you'll want call function when user first arrives, incase user starts half way down page, using:

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

a few things note:

i've hard coded sliders width 200px, , start point 100px. stop() function important , stops animate function being called redundantly.

here's working jsfiddle matching css