如何实现自动隐藏导航？

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

它甚至还包括一个IE修复从this SO post拉到得到正确的滚动位置

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

我以为我重新创建该网站相当不错（但它是更好，因为该矿拥有一只小猫，哈哈）