我正在使用 CSS 制作导航栏。当前,当用户滚动时,我的 Logo (#cos_logo
) 会立即消失。如果它只是通过 CSS 过渡慢慢消失,我更愿意。
谁能解释一下我是如何使用现有代码实现这一目标的?
$(window).scroll(function(){
$('#header_nav').toggleClass('scrolled', $(document).scrollTop() > 0);
});
#header_nav {
background: #1588cb;
width: 100%;
height: 100px;
position: fixed;
z-index: 2;
top: 0;
left: 0;
}
body {
height:1000px
}
nav {
height:100px
}
nav ul {
position: absolute;
bottom: 0;
margin: 0px;
right: 0px;
transition: 0.3s;
}
#header_nav{
height:100px;
transition: height .600s ease;
}
#header_nav.scrolled{
height:78px;
}
#header_nav.scrolled ul#menu-primary-menu{
bottom:45%;
}
#cos_logo {
padding: 25px 0 0 0;
float: right;
}
#header_nav.scrolled #cos_logo {
display:none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="header_nav">
<a id="cos_logo" href="#" title=""><img src="https://placeholdit.imgix.net/~text?txtsize=8&txt=171%C3%9730&w=171&h=30" alt="" width="171" height="30" class="no-scale" /></a>
<nav class="primary menu">
<div class="menu-primary-menu-container">
<ul id="menu-primary-menu" class="menu">
<li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="/wordpress/">Home</a></li>
</ul>
</div>
</nav>
</div>
最佳答案
您不能像在 JavaScript 中那样在 CSS 中为显示切换设置动画。只需在此处使用 opacity
即可:
#cos_logo {
transition: opacity .5s;
}
#header_nav.scrolled #cos_logo {
opacity: 0;
}
演示: JSFiddle
作为替代方案,您可以使用 jQuery:
$(window).scroll(function() {
$('#cos_logo').fadeOut(500);
});
演示:JSFiddle
关于javascript - 淡入淡出CSS中的过渡元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33719296/