4

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.

Thanks

2
  • 2
    Try Mr Google first and show the progress ..
    – matzone
    May 6, 2013 at 1:34
  • 1
    @hjpotter92 true, but no answer was accepted to that question.
    – webketje
    May 6, 2013 at 1:42

3 Answers 3

7

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

6
  • 1
    Thank you! This did the trick for me. The only issue I have now is that the DIVs are overlapping each other. And I can't quite get the menu centered to the browser.
    – JonnyBravo
    May 6, 2013 at 4:17
  • @JonnyBravo Here's an updated version that centers the slider: jsfiddle May 6, 2013 at 14:19
  • Oh I meant center the tab against the left side of the browser. But I seriously am grateful for your help. You're awesome.
    – JonnyBravo
    May 6, 2013 at 16:31
  • @JonnyBravo I've updated jsfiddle to center the slider on the browser window. I've also increased the complexity of the code, so it should work a little smother. Here's the updated jsfiddle. I don't agree that your question was a duplicate of the linked question, and I like writing solutions that I may use in the future. Could you please remember up vote my answer as well, thanks :) May 6, 2013 at 18:45
  • Thank you Graham. I've tried using the new code, but there seems to be a delayed response time when I scroll. And I tried to up vote, but apparently I didn't have enough reputation. :(
    – JonnyBravo
    May 8, 2013 at 1:41
0

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;

0

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.