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

Question

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:

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

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:

<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 .

Answer 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 {
    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.

Answer 2

Try this below code and use CSS transition property instead of animation which looks simpler unlike 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;
}

You js would be:

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

Answer 3

Working solution

Try margin-left: 92px; instead of 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