我如何得到一个CSS3动画播放向下滚动，并在向上滚动的反向

How do I get a CSS3 animation to play on scroll down and in reverse on scroll up?

本文关键字：滚动 播放 动画 何得 CSS3 一个      更新时间：2023-09-26

我正在使用一个博客网站，我已经设置了粘性导航。理想情况下，我希望粘性导航适合浏览器的宽度一旦激活。我已经知道怎么做了，但当我向上滚动时，它会弹回原处，没有任何动画。我想弄清楚如何把导航栏放回原来的位置，同时缩小到原来的大小。你可以在我的测试博客上看到我的意思。它在向下滚动时显示动画，而不是向上滚动。

我很抱歉我不能为此制作一个JSFiddle，因为我使用的模板非常复杂。但是，我相当肯定Javascript代码可以做到这一点。但是，它需要在已经存在的代码中实现，因为该代码是激活粘性导航的代码。

这是导航栏固定后使用的CSS;下面我包含了一个.unfixed属性来反转动画。我只需要弄清楚如何在Javascript代码中正确激活它。

sticknav {
    background: #b50000;
    height: 46px;
    width: 1080px;
    margin-right: 0px;
    margin-left: 413px;
    left: 0px;
    right: 0px;
    position: relative;
    z-index: 1;
    border-top: 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 forwards 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代码:

$(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');
    }
  });
});

这是一个稍微修改的代码，部分工作。当页面加载并完成任何滚动时，该工具条被固定在顶部。然而，当我向下滚动205像素时，它展开了。当我向上滚动时，它收缩了，但保持固定。我想让它回到它在板上的原始位置(即不再是固定的)

$(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');
        }
    });
    $(window).scroll(function(){
        if ($(window).scrollTop() < aboveHeight){
        $('sticknav').addClass('unfixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('unfixed').next().css('padding-top','0');
        }
    });
});

你需要添加一个额外的条件当滚动条小于aboveHeight:

$(document).ready(function() {
  var aboveHeight = 205;
  $('.sticknav').addClass('unfixed');
  $(window).scroll(function(){
    if ($(window).scrollTop() > aboveHeight &&  $('.sticknav').hasClass('unfixed')){
      $('.sticknav').addClass('fixed').removeClass('unfixed').css('top','0').next().css('padding-top','60px');
    } else if($(window).scrollTop() < aboveHeight  &&  $('.sticknav').hasClass('fixed')){
      $('.sticknav').addClass('unfixed').removeClass('fixed').next().css('padding-top','0');
    }
  });
});

另外，您可能希望将CSS (top, padding)移动到CSS文件中

Try with

sticknav {
    background: #b50000;
    height: 46px;
    width: 1080px;
    margin:auto;
    left: 0px;
    right: 0px;
    position: absolute;
    z-index: 1;
    border-top: 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);

    -webkit-transition: all 1s;
       -moz-transition: all 1s;
        -ms-transition: all 1s;
         -o-transition: all 1s;
            transition: all 1s;
}
.fixed {
    position:fixed;
    width: 1200px;
}

$(window).scroll(function(){
    if ( $(window).scrollTop() >= 205){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
    } else {
        $('sticknav').removeClass('fixed').next().css('padding-top','0');
    } 
});
相关文章：