Jquery 力<；导航>；在响应收割台离开屏幕后在固定位置跟随

这是一个我不太了解的领域。基本上我有一个标题，上面有响应。我希望当用户向下滚动，.header离开屏幕时，页面顶部会出现一个导航条

<div id="header" class="home-header">
<div class="slogan">
<?php bloginfo('name'); ?> <?php wp_title(); ?>
</div>
<!-- NAVIGATION -->
        <nav id="navigation" class="nav" role="navigation" onclick="">
        <?php wp_nav_menu(); ?> 
        </nav>
<!--NAVIGATION -->
</div>

这是包含导航标签及其id的标题

与此站点类似：

编辑：

---

值得注意的是，该网站反应迅速。因此，如果只使用响应性代码，我会更喜欢它。

这是一个我过去使用过的JQuery脚本，尽管现在Bootstrap为我做了这件事：）将菜单类更改为适合您的站点的菜单类，还有一个问题需要解决

JQuery：

var num = 145; //number of pixels before modifying styles

改为使用此选项获取标题高度：var num=$（'.header'）.height（）

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed-nav');
    }
    else {
        $('.menu').removeClass('fixed-nav');
    }
});

CSS:

---

你基本上需要这样的东西：

viewport = $(window);
navbar = $("#navigation");
offset = navbar.offset().top-10;
$("document").scroll(function(){
   if (viewport.scrollTop() > offset && 
       !navbar.hasClass("fixed") {
      return navbar.addClass("fixed");
   }
   if (viewport.scrollTop() < offset &&
       navbar.hasClass("fixed") {
      return navbar.removeClass("fixed");
   }
});

---

你用的是引导程序吗，看起来是这样的？也许是这样的@我正在使用Wordpress。自定义主题mituw16：关闭，但我没有使用他们的很多功能。想要一些轻量级的东西：）我的回答与下面给出的相同；这将保留我的响应元素吗？它将允许您在调用脚本时使用任何标题高度，而不是固定高度。您还可以将其更改为$（window）.height（）行，如果您希望在向下滚动一页像素后显示它，那么Don’我不是说听起来很愚蠢。。。但我有点健忘。这是否需要创建带有class.menu wrap的div，如果是，它将向类中添加固定导航。提问是人们能做的最不愚蠢的事情：）查看您的站点，导航具有class.menu，因此您可以在我的脚本中将类更改为just.menu而不是.menu wrap。现在我真的很困惑！哈哈：我以为我在用。导航？无论哪种方式，.nav和/或.menu都不会为我更改它。addClass、hasClass和removeClass不应该有Dot。这对我来说不起作用，你也离开了hasClass（“openI正在将它放在我的标题中，对吗？

viewport = $(window);
navbar = $("#navigation");
offset = navbar.offset().top-10;
$("document").scroll(function(){
   if (viewport.scrollTop() > offset && 
       !navbar.hasClass("fixed") {
      return navbar.addClass("fixed");
   }
   if (viewport.scrollTop() < offset &&
       navbar.hasClass("fixed") {
      return navbar.removeClass("fixed");
   }
});

#navigation.fixed {
   position: fixed;
   top: 10px;
}