Javascript滚动后固定顶部导航栏

Question

有人知道在 lesscss.org 上创建导航栏效果所使用的javascript效果是什么吗？当滚动超过一定点后，导航栏才固定在顶部。如果有人有实际的代码示例或教程链接，那将不胜感激。

- snakesNbronies

Answer 1

这是一个使用window.onscroll事件进行Javascript检测的方法。

在HTML源文件中靠近顶部：

window.onscroll = function () {
    if (!docked && (menu.offsetTop - scrollTop() < 0)) {
      menu.style.top = 0;
      menu.style.position = 'fixed';
      menu.className = 'docked';
      docked = true;
    } else if (docked && scrollTop() <= init) {
      menu.style.position = 'absolute';
      menu.style.top = init + 'px';
      menu.className = menu.className.replace('docked', '');
      docked = false;
    }
};

- MikeM

---

刚刚也找到了一个关于HTML5的教程（http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit）。不过还是接受你的答案，因为你先发现了它。 - snakesNbronies