1

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

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

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

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

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

谢谢

4

1 回答 1

7

不可能像你想要的那样在纯 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 修复程序，以获得正确的滚动位置

这是 jQuery 版本，取自这篇 SO 帖子

编辑

正如 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 版本，或者如果你喜欢， jQuery 版本

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

于 2013-08-04T04:09:02.007 回答