标签：css-transitions css html javascript jquery

我的导航悬停在边框的底部,当您在网站上向下滑动后,我的第一个导航git隐藏了,而第二个导航又显示了.导航具有相同的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;
}

解决方法:

看来您的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

标签：css-transitions,css,html,javascript,jquery
来源： https://codeday.me/bug/20191120/2047285.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。