html - 需要一些帮助来设置 html/css 菜单或 js

Question

你好，我正在尝试制作一个粘性菜单，在让我们说 150px 之后“粘”到窗口的顶部。这是我的二级菜单，我希望它在用户滚动经过我的标题和导航栏后留在我想要的位置，然后通过滚动条停留在窗口顶部。

我设法让它粘在上面:

position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 0;

但我希望二级菜单的“粘性”开始超过我的标题和导航栏。

希望你们能正确理解我的意思。

这是一个例子:

http://davist11.github.io/jQuery-Stickem/

我试过这个插件，但它对我不起作用，而且我希望该网站只有 html css，这就是分配的内容。谢谢

Answer 1

首先，使用

position: absolute;

并给它正确的位置。然后，您需要 jQuery。

$(document).scrollTop()

会告诉你，你滚动了多远。

$(window).scroll(function() {
  if ($(document).scrollTop() > 150) {
    $('#navbarthing').css({position: 'fixed', top: '0'});
  } else {
    $('#navbarthing').css({position: 'absolute', top: '150px'});
    //This is to make sure it resets if you sroll up again.
  }
});

您可以在这里看到它的实际效果:http://jsfiddle.net/b4YAr/1/

问题是，为了使其工作，您必须包含 jQuery。这是入门指南:http://learn.jquery.com/about-jquery/how-jquery-works/ 如果您有更多时间，我推荐 codeacademy 上的 jQuery 类(class) - http://www.codecademy.com/de/tracks/jquery

祝你好运。