Javascript jquery.show（）之后导航css不工作

我的导航在悬停状态下有一个边框底部，当你在站点上向下滑动后，我的第一个导航Git被隐藏，第二个导航被显示。导航有相同的css，但是我在第二个导航上的边框底部不起作用。这是我的css或jquery的问题吗？有人能帮我修一下吗

HTML:

CSS:

---

看起来您的JQuery在id选择器中有一些语法问题。确保包括

#

编辑

根据反馈，我再次访问了这个问题，并对我认为可以解决这个问题的解释进行了修改。持续的反馈将有助于解决此问题

$(window).scroll(function() {
    if ($(window).scrollTop() > 100 ){
        $('header').addClass('hide');
        $('#header').removeClass('hide');
    } else {
        $('#header').addClass('hide');
        $('header').removeClass('hide');
    };      
});

---

脚本中的第一个问题是HTML代码。 您应该将第二个nav放在header元素中，如下所示：

 <header>
     <nav id="first-nav">
        <a href="#home" class="smoothScroll">Home</a>
        <a href="#about" class="smoothScroll">About</a>
        <a href="#projects" class="smoothScroll">Projects</a>
        <a href="#contact" class="smoothScroll">Contact</a>
     </nav>
     <nav id="second-nav">
        <a href="#home" class="smoothScroll">Home</a>
        <a href="#about" class="smoothScroll">About</a>
        <a href="#projects" class="smoothScroll">Projects</a>
        <a href="#contact" class="smoothScroll">Contact</a>
     </nav>
 </header>

---

如果有什么不清楚的地方，请告诉我，我很乐意提供帮助。

不，这不是问题，我的第一个导航在中，第二个导航在一个id为“header”的中。我不明白这里的上行投票-

显然是一个不需要标识符的HTML5元素。此外，一行中的四个相同选择器可以很容易地链接起来，以获得更清晰的代码。@Shikkediel感谢您的反馈。再次访问这个问题，我可以看到你的担忧。由于一些原因，特别是关于

元素和

元素，缺乏对意图的细致和松散的解释，因此存在一些混乱。在多次阅读这个问题之后，我重新设计了一个专注的尝试，以解决我所理解的问题。再见。在研究了代码之后，我不得不承认它有点混乱。应用的类没有任何对应的CSS，唯一有效的方法似乎是第一个

$（'header'）。show（）

…这是编写html的更好方法，但它不能解决为什么下划线在第一个导航上工作而不在第二个导航上工作的问题

header, #header{
  height: 75px;
  background: rgba(26, 28, 30, 0.75);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 50;
}
header{
  display: none;
}
#header{
  background-color: transparent;
}
nav{
  position: fixed;
  right: 0;
  margin-top: 22.5px; 
  margin-right: 30px;
  z-index: 55;
}
nav a:link, nav a:visited{
  position: relative;
  display: inline-block;
  padding: 0px 10px 0px 10px;
  text-decoration: none;
  font-size: 1.5em;
  color: #fffffa;
}
nav a:after{
  content: '';
  display: block;
  margin: auto;
  width: 0px;
  background: transparent;
  transition: width .5s ease, 
  background-color .5s ease;
}
nav a:hover:after{
  width: 100%;
  border-bottom: 2px solid #fffffa !important;
}

$(window).scroll(function() {
    if ($(window).scrollTop() > 100 ){
        $('#header').show();
        $('#header').removeClass('slideUp');
        $('#header').addClass('slideDown');
        $('#header').addClass('hide');
    } else {
        $('#header').addClass('slideUp');
        $('#header').removeClass('hide');
    };      
});

$(window).scroll(function() {
    if ($(window).scrollTop() > 100 ){
        $('header').addClass('hide');
        $('#header').removeClass('hide');
    } else {
        $('#header').addClass('hide');
        $('header').removeClass('hide');
    };      
});

 <header>
     <nav id="first-nav">
        <a href="#home" class="smoothScroll">Home</a>
        <a href="#about" class="smoothScroll">About</a>
        <a href="#projects" class="smoothScroll">Projects</a>
        <a href="#contact" class="smoothScroll">Contact</a>
     </nav>
     <nav id="second-nav">
        <a href="#home" class="smoothScroll">Home</a>
        <a href="#about" class="smoothScroll">About</a>
        <a href="#projects" class="smoothScroll">Projects</a>
        <a href="#contact" class="smoothScroll">Contact</a>
     </nav>
 </header>

   $(document).ready(funciton() {
      //hide the second nav
      $('#second-nav').hide();

      //when the scroll event fired
      $(window).scroll(function() {
           if ($(window).scrollTop() > 100) {
               $('#second-nav').show();
               $('#first-hav').hide();
           }
           else {
               $('#first-nav').show();
               $('#second-hav').hide();
           }
      }); 
   });