Question

我的导航在悬停时有一个边框底部，在您在网站上向下滑动后，我的第一个导航gits隐藏，我的第二个导航显示。导航具有相同的CSS，但我在第二个导航的边界底部不起作用。这是我的CSS或jquery的问题吗？任何人都可以帮我解决这个问题吗？

HTML：

<header>
        <a href="#home" id="logo" class="smoothScroll">
            <img src="img/logo.png">
        </a>
        <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>
    <div id="header" class="fade">
        <a href="#home" id="logo" class="smoothScroll">
            <img src="img/logo-white.png">
        </a>
        <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>
    </div>

Jquery的：

$(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');
    };      
});

CSS：

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;
}

Answer 1

看起来你的JQuery在id选择器中有一些语法问题。请务必加入#

$(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');
    };      
});

Updated JSFiddle Link

Answer 2

脚本中的第一个问题是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>

我给了＆＃34; first-nav＆＃34;和＆＃34; second-nav＆＃34;易于处理。第二个问题是你的jQuery。在 if 条件下，当浏览器滚动超过100时，告诉jQuery隐藏标题元素。这是因为 nav < / strong>元素需要在标题元素中使用。

我已经编辑了你的jQuery。

$(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(); } }); });

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

nav css在jquery之后无效.show（）

2 个答案:

Updated JSFiddle Link