Question

我正在使用CSS中的导航栏。目前，当用户滚动时，我的徽标（#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>

Answer 1

您无法像在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

在CSS中淡化过渡元素

1 个答案: