Question

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

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

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

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

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

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的插件，正是你想要做的： Link to Affix

Answer 3

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

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

3 个答案: