How to implement auto-hide navigation?

Question

I'm not sure where to post this question, so please excuse me if I am violating any policies.

To clarify my question, I want to achieve the same navigation bar as Teehan + Lax's.

Here is their website: http://www.teehanlax.com/tools/

If you notice, the navigation auto hides itself when you scroll down, however when you scroll up it would show it self again.

So my question is, how did they achieve this? Is it through only CSS or do I need JavaScript to do this? Whatever way it is, can someone also point towards the right direction on how I can find the information to implement this?

Thank you

Well, I just found some awesome little JavaScript of theirs with cool ASCII art. — BLaZuRE, Aug 03 '13 at 18:43

score 7 · Accepted Answer · edited May 23 '17 at 12:01

It's not possible to change position from fixed to absolute in pure CSS like you want, so I used some javascript to do so. Demo

function followTo(elem, pos) {
    var element = document.getElementById(elem);        
    window.onscroll = function(e){
        var disFromTop = document.all? iebody.scrollTop : pageYOffset;
        if (disFromTop > pos) {
            element.style.position = 'absolute';
            element.style.top = pos + 'px';
        } else {
            element.style.position = 'fixed';
            element.style.top = 0;
        }
    };
};    
followTo("nav", 100);

It even includes an IE fix pulled from this SO post to get the correct scroll position

Here is the jQuery version, taken from this SO post

EDIT

As pointed out by zanona, I did not include the feature where the navigation appears if you scroll up from a place further down in the page. As a result, I create a new technique that uses a setInterval

var last = 0,    // The last read top value
    delay = 150, // The delay for the setInterval
    threshold = 30;    // The max scroll distance before showing/hiding the nav

//I always set a variable to my setIntervals in case I want to stop them later on
var navMovement = setInterval(function() {
    var nav = document.getElementById('nav'), // Gets nav object
        pageVertOffset = document.all? iebody.scrollTop : pageYOffset;
    // Happens if the difference in scroll is below the negative threshold
    if(pageVertOffset - last < -threshold) { 
        nav.style.top = "0px"; // Put the nav at the top of the window
    }
    // Happens if the difference in scroll is above the threshold
    else if(pageVertOffset - last > threshold){ 
        nav.style.top = - nav.offsetHeight + "px"; // Hides the navigation
    }
    last = pageVertOffset; // Updates the previous scroll value
}, delay); // Runs every `delay` amount

Javascript version, or if you prefer, jQuery version

I thought I recreated the site pretty well (but it's better because mine has a kitten, haha)

I might be wrong but how about when you are let's say with 80% of the page scrolled if you scroll up again it won't show up the menu like Teehan+Lax? — zanona, Nov 20 '13 at 17:30
@zanona I didn't notice that feature before. I updated my answer with a better all around solution that takes that into account! — Zach Saucier, Nov 20 '13 at 20:06
That seems great @Zeaklous, works like a charm and great job with the threshold and delay settings. ;) — zanona, Nov 20 '13 at 23:23
@JM-AGMS It's an old variable defined [here](http://javascriptkit.com/javatutors/static2.shtml) that held some browser info. You're right that this answer is missing the definition — Zach Saucier, Sep 12 '17 at 01:18

How to implement auto-hide navigation?

1 Answers1