Web 如何实现自动隐藏导航？

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

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

这是他们的网站：

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

所以我的问题是，他们是如何做到这一点的？是通过CSS还是我需要JavaScript来实现？无论是哪种方式，是否有人也能指出正确的方向，告诉我如何找到实现这一点的信息

---

谢谢

在纯CSS中不可能像您所希望的那样将位置从固定更改为绝对，所以我使用了一些javascript来实现这一点

它甚至包括一个IE补丁，从中获取正确的滚动位置

，摘自

编辑

正如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

var last=0，//上次读取的最大值
delay=150，//设置间隔的延迟
阈值=30；//显示/隐藏导航前的最大滚动距离
//我总是将一个变量设置为setInterval，以防以后需要停止它们
var navMovement=setInterval（函数（）{
var nav=document.getElementById（'nav'），//获取nav对象
pageVertOffset=document.all？iebody.scrollTop:pageYOffset；
//如果滚动差异低于负阈值，则会发生此情况
如果（pageVertOffset-last<-threshold）{
nav.style.top=“0px”//将导航置于窗口顶部
}
//如果滚动中的差异高于阈值，则发生此情况
如果（pageVertOffset-last>阈值）{
nav.style.top=-nav.offsetHeight+“px”；//隐藏导航
}
last=pageVertOffset；//更新上一个滚动值
}，延迟）；//每延迟一次

，或者如果你愿意

---

我认为我重新创建的网站相当不错（但它更好，因为我有一只小猫，哈哈）

在纯CSS中，不可能像你所希望的那样将位置从固定位置更改为绝对位置，所以我使用了一些javascript来做到这一点

它甚至包括一个IE补丁，从中获取正确的滚动位置

，摘自

编辑

正如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

var last=0，//上次读取的最大值
delay=150，//设置间隔的延迟
阈值=30；//显示/隐藏导航前的最大滚动距离
//我总是将一个变量设置为setInterval，以防以后需要停止它们
var navMovement=setInterval（函数（）{
var nav=document.getElementById（'nav'），//获取nav对象
pageVertOffset=document.all？iebody.scrollTop:pageYOffset；
//如果滚动差异低于负阈值，则会发生此情况
如果（pageVertOffset-last<-threshold）{
nav.style.top=“0px”//将导航置于窗口顶部
}
//如果滚动中的差异高于阈值，则发生此情况
如果（pageVertOffset-last>阈值）{
nav.style.top=-nav.offsetHeight+“px”；//隐藏导航
}
last=pageVertOffset；//更新上一个滚动值
}，延迟）；//每延迟一次

，或者如果你愿意

---

我认为我重新创建的网站相当不错（但更好，因为我的网站有一只小猫，哈哈）

好吧，我刚刚发现了一些很棒的小JavaScript，带有很酷的ASCII艺术。好吧，我刚刚发现了一些很棒的小JavaScript，带有很酷的ASCII艺术。我可能错了，但如果你再次向上滚动，页面的80%被滚动，它就不会像Teehan+Lax？@zanona那样出现在菜单上。我以前没有注意到这个功能。我用更好的全面解决方案更新了我的答案，考虑到了这一点！这看起来很棒@Zeaklous，在阈值和延迟设置方面非常有魅力和出色的工作什么是

iebody

？它从未定义过。@JM-AGMS它是一个定义了一些浏览器信息的旧变量。你是对的，这个答案缺少了定义。我可能是错的，但是如果你再次向上滚动，页面的80%被滚动，它就不会像Teehan+Lax一样出现在菜单上了。我以前没有注意到这个功能。我用更好的全面解决方案更新了我的答案，考虑到了这一点！这看起来很棒@Zeaklous，在阈值和延迟设置方面非常有魅力和出色的工作什么是

iebody

？它从未定义过。@JM-AGMS它是一个定义了一些浏览器信息的旧变量。你是对的，这个答案缺少定义