Navigation fade in after scroll down?

Question

I would like to get a navigation exactly like this website : http://www.interviewmagazine.com/

A navigation bar appears after scrolling down about 700 pixels or so.. its a fixed nav with fade in effect and has a fade out effect when you scroll back to top.

I tried to see how they did their code but i couldnt figure it out.

sounds like mootools tho?

If someone can help that would be awesome. thanks!

Solution 1

You can create such a menu using jQuery and CSS, swapping classes as needed when:

var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
    //do something;
}

CSS: position : fixed, opacity : 0, height : 0; overflow : hidden

swap class to change height to fixed amount

animate({opacity : 1.0}, 'fast', function() {
    //callback;
});

You'll have to set a listener for when user scrolls, but this should get you started. All you need is jQuery and a browser, a logical approach to cut the project up into manageable parts, and time.

EDIT: Here's your fiddle.

http://jsfiddle.net/lazerblade01/fNn7K/26/

Solution 2

For anyone searching through stackoverflow here is my try:

$(function(){
    // Check the initial Poistion of  Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyHeaderTop ) {
                    $('#stickyheader').css({position: 'fixed', top: '0px'});
                    $('#stickyheader').css('opacity', '1');
            } else {
                    $('#stickyheader').css({position: 'static', top: '600px'});
                    $('#stickyheader').css('opacity', '0');
            }
    }); 
 });

Here is a Fiddle DEMO http://jsfiddle.net/uFq2k/297/

It is a little modified version of this code: how can I stick the div after scrolling down a little

Solution 3

David Walsh has a thing he calls ScrollSpy - much like twitter's scroll spy - only it does a different thing.

the twitter one can react to a particular element of interest coming into view.

walsh's plugin can react and give you events when a user scrolls to a particular threshold and back.

http://davidwalsh.name/mootools-scrollspy

Comments

[David]

Not sure why, but that page is really jittery in Safari on my Mac. Weird.

[Dustin Graham]

Really, that's lame. Have you used Atlassian's Jira? It has a pretty slick fade transition on their ticket system while scrolling.

[David]

Haven't used it in Safari, though I never had problems with it in Firefox. The link from the question is pretty smooth on any browser I use right now. (And it's a pretty cool effect, I may have to use it at some point.)

[teejay.webdesign]

Thanks, i have no idea how to finish the code..im horrible with javascript.

[Dustin Graham]

Yea, I hadn't actually looked at the link. Just read his description. After checking it out. It is nifty, not really a slide in effect though, just a fade in after a certain distance. Seems useful, but it might only work on tall artistic sites like that. Who knows.

[Lazerblade]

Sorry, if I had the time and patience I'd give it a shot but it's not happening tonight. If you can't figure it out, let me know and maybe I can get you started with a well-documented template where you can just plug in what you need to.

[teejay.webdesign]

If you can I'd REALLY appreciate it ! I really cant seem to get it. I can get the fixed nav but cant get the javascript to work.

[teejay.webdesign]

Hey did you by any chance get to make that template for me?

[Admin]

aaah thx - very cool. and when i want it to start after an amount of pixels i simply do: "var stickyHeaderTop = $('nav').offset().top + 200;"