javascript - 滚动时，如何让粘性导航栏的动画在两个方向上都起作用？

Question

Here's a link to my test blog for reference

感谢 TylerH，我为向下 滚动设置了动画，但我希望当我向上滚动时该动画反转。我假设我需要一个额外的 javascript 函数才能工作，所以暂时:

这是新的 CSS(添加了 .unfixed 属性):

sticknav {
background: #b50000;
height: 46px;
width: 1080px;
margin-right: 0px;
margin-left: 413px;
left: 0px;
right: 0px;
position: relative;
z-index: 9999;
border-bottom: 4px solid #e50000;
webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.49);
box-shadow: 0 2px 6px rgba(0,0,0,0.49);
}
.fixed {
    position:fixed;
    animation: fill 333ms forwards ease-in-out;
    -webkit-animation: fill 333ms forwards ease-in-out;
}
@keyframes fill {
    from {margin-left: 413px; width: 1080px;}
    to {margin-left: 0px; width: 100%;}
}
@-webkit-keyframes fill {
    from {margin-left: 413px; width: 1080px;}
    to {margin-left: 0px; width: 100%;}
}
.unfixed {
    position:fixed;
    animation: unfill 333ms ease-in-out;
    -webkit-animation: unfill 333ms ease-in-out;
}
@keyframes unfill {
    from {margin-left: 0px; width: 100%;}
    to {{margin-left: 413px; width: 1080px;}
}
@-webkit-keyframes unfill {
    from {margin-left: 0px; width: 100%;}
    to {{margin-left: 413px; width: 1080px;}
}

这是处理粘性导航的 Javascript:

<script type="text/javascript">
$(document).ready(function() {

var aboveHeight = 205;

    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

我需要找到一种方法来激活 .unfixed 一旦 .fixed 停用，但这听起来很复杂。只有在 .fixed 激活后用户向上滚动后，我才需要激活它。是的，这听起来很复杂，我们将不胜感激。希望有更简单的方法。 我想要的例子可以在 Game Rebels 上找到。 .

Answer 1

尝试下面的代码并使用 CSS transition 属性而不是 animation ，它看起来比 animation 更简单

stickynav{ 
     background: #b50000;
     height: 46px;
     width: 1080px;
     margin-right: 0px;
     margin-left: 413px;
     left: 0px;
     right: 0px;
     position: relative;
     z-index: 9999;
     border-bottom: 4px solid #e50000;
     webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.49);
     box-shadow: 0 2px 6px rgba(0,0,0,0.49);
     transition:width 500ms; //Add this
}
.fixed { 
    position:fixed;
    margin-left:0px;
    width:100%;
    top:0px;
}

你 js 会是:

$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight)
           $('stickynav').addClass('fixed')
        else
           $('stickynav').removeClass('fixed')
});