如何实现自动隐藏导航？

Question

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

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

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

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

所以我的问题是,他们是如何实现这一目标的？是仅通过CSS还是我需要JavaScript来执行此操作？无论它是什么方式,有人也可以指出如何找到实现这一点的信息的正确方向？

谢谢

Answer 1

在你想要的纯CSS中,不可能将位置从固定更改为绝对,所以我使用了一些javascript来实现.演示

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

它甚至包括从这个SO帖子拉出的IE修复,以获得正确的滚动位置

这是从这篇SO帖子中获取的jQuery版本

编辑

正如zanona所指出的,如果从页面中的更下方向上滚动,我没有包含导航出现的功能.结果,我创建了一种使用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版本,或者如果您愿意,还可以使用 jQuery版本

我以为我很好地重建了这个网站(但它更好,因为我有一只小猫,哈哈)