如何实现自动隐藏导航？

Question

我不知道在哪里发布这个问题，所以如果我违反了任何政策，请原谅。

为了澄清我的问题，我想实现与 Teehan + Lax 相同的导航栏。

这是他们的网站：http://www.teehanlax.com/tools/

如果您注意到，当您向下滚动时，导航自动会自动隐藏，但当您向上滚动时，它会再次显示。

所以我的问题是，他们是如何做到这一点的？是只通过 CSS 还是我需要 JavaScript 来做到这一点？不管是什么方式，有人也可以指出我如何找到实现这一点的信息的正确方向吗？

谢谢

Answer 1

在纯 CSS 中不可能像你想要的那样将位置从固定更改为绝对，所以我使用了一些 javascript 来做到这一点。 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);

它甚至包括从this SO post 提取的 IE 修复程序，以获取正确的滚动位置

Here is the jQuery version，取自this SO post

编辑

正如 zanona 所指出的，如果您从页面中更下方的位置向上滚动，我没有包含出现导航的功能。因此，我创建了一种使用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，或者如果你愿意，jQuery version

我认为我很好地重新创建了网站（但更好，因为我有一只小猫，哈哈）