当垂直滚动经过它时，绝对元素变得固定

Question

我目前正在建立一个基于HTML，CSS和一点点Javascript / jQuery的网站。 （我对JavaScript很不好。从来没有真正尝试过学习它，只是复制代码。）

我正在尝试使用我的导航栏或“tabledesmatières”（网站是法语），这是一个position: absolute; 元素，成为一个position: fixed; 元素一旦滚过它，就像plus.google.com （Google +的子标题）。

到目前为止，这是我的代码： http ： //codepen.io/anon/pen/FnCch

我只是不知道如何实现它。

此外，我想了解如何让我的页面看起来更好。 我正在尝试整页设计，比如苹果公司，而不是通常的保证金和类似桌面的网站。 我哥哥说效果和编码很惊人，但看起来很恶心（严重对齐，我遇到麻烦，字体彼此不顺利，他说一切都太大了......等等）

http://remyses.neocities.org/tpe2014.html

Answer 1

向下滚动窗口时，使用以下javascript更改导航栏的样式。

// trigger on scroll event    
window.onscroll = function () {
  // get scrollbar position
  var doc = document.documentElement, body = document.body;
  var top = (doc && doc.scrollTop  || body && body.scrollTop  || 0);

  // get menu 
  var menu = document.getElementById("cssmenu");

  // if scrollbar past menu height: set position to fixed, 
  if (top > (menu.offsetHeight + menu.offsetTop)) {
     menu.style.position = "fixed";
  } 
  // set position to absolute
  else {
     menu.style.position = "absolute"; 
  }
};

见这里： http ： //codepen.io/anon/pen/xnsBC

Answer 2

我同意，bootstrap是一个很棒的框架，可以使用正确的JS来完成任何你想要的适用于不同设备的东西。 从设计方面来看，您可能还希望将EM用于字体而不是px，以便在所有设备上更容易阅读。

同样在bootstrap中有一个名为affix的插件，正是你想要做的： 链接到Affix

Answer 3

对于样式，没有表格，您可以使用div标签。 像bootstraps这样的CSS框架也非常有用。 要保留导航栏，您必须使其位置：固定而不是位置：绝对。 如果你想使用滚动页面，然后导航栏停留在屏幕的顶部，你需要一些javascript。