滚动时，如何让粘性导航栏的动画在两个方向上都能正常工作？

Here's a link to my test blog for reference

这是我测试博客的链接供参考

Thanks to TylerH, I've got the animation set for when I scroll down, but I'd like that animation to reverse when I scroll back up. I'm going to assume that I need an additional javascript function for that to work, so for the time being:

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

Here is the new CSS (with added .unfixed property):

这是新的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;}
}

Here is the Javascript that does with the sticky navigation:

这是使用粘性导航的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>

I need to find a way to activate .unfixed once .fixed deactivates, but that sounds complicated. I'll need it to activate only after the user scrolls back up after .fixed activates. Yeah, that sounds complicated, any help would be appreciated. Hopefully there's an easier way. An example of what I want exactly can be found on Game Rebels.

我需要找到一种方法来激活.unfixed一次.fixed去激活,但这听起来很复杂。只有在用户在.fixed激活后向上滚动后,我才需要激活它。是的,这听起来很复杂,任何帮助都会受到赞赏。希望有一种更简单的方法。我想要的一个例子可以在Game Rebels上找到。

3 个解决方案

#1

There's a simple solution to your problem. In order to use animation and keep the end result, rather than have it reset upon completion, you need to apply an animation-fill-mode.

有一个简单的解决方案来解决您的问题。为了使用动画并保留最终结果,而不是在完成时重置它,您需要应用动画填充模式。

Move your animation to .fixed instead of .sticknav (this will make the animation play when .fixed is added on scroll-down, rather than at page load), and add the animation-fill-mode:

将动画移动到.fixed而不是.sticknav(这将在向下滚动时添加.fixed而不是在页面加载时播放动画),并添加动画填充模式:

.fixed {
    position: fixed;
    animation: fill 11s linear;
    animation-fill-mode: forwards;
}

I would also strongly recommend that you use external CSS files, rather than putting all your CSS in <style> tags.

我还强烈建议您使用外部CSS文件,而不是将所有CSS放在

#2

Try this below code and use CSS transition property instead of animation which looks simpler unlike animation

尝试下面的代码并使用CSS转换属性而不是动画,它看起来比动画更简单

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;
}

You js would be:

你js将是:

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

#3

Working solution

Try margin-left: 92px; instead of margin-left: 413px

尝试margin-left:92px;而不是margin-left:413px

sticknav {
   background: #b50000;
   height: 46px;
   width: 1080px;
   margin-right: 0px;
   margin-left: 92px;
   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);
   animation-name: fill;
   animation-duration: 12s;
}

Output