javascript-jQuery .show()之后导航css无法正常工作
作者:互联网
我的导航悬停在边框的底部,当您在网站上向下滑动后,我的第一个导航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');
};
});
标签:css-transitions,css,html,javascript,jquery 来源: https://codeday.me/bug/20191120/2047285.html