Javascript 褪色RGBA颜色变化

我正在尝试创建一个导航栏，当用户不在页面顶部时，导航栏的不透明度为80%。我已经设法让滚动和相应的CSS更改工作，但我不确定的褪色。我尝试了

.fadeTo（）

，它似乎将不透明度降低到0，然后再次淡入导航栏，而不是从100%更改为80%

$('document').ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 0) {
        $('.top-navigation').css("background","rgba(53,61,64,0.8)")
    } else {
        if (scroll == 0) {
            $('.top-navigation').css("background","rgba(53,61,64,1)")
        }
    }
  });
});

有什么想法吗？非常感谢

您想要什么 使用CSS进行淡入淡出

CSS

 .topnavigation {
     opacity: 1;
    transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    -webkit-transition: opacity .5s ease-out;
    -o-transition: opacity .5s ease-out;
}

.scrolled .topnavigation { opacity:0.5; }

;(function() {

   /* this is the scroll */
   var _html = $('html');
   $(window).scroll(function(){
     var _scroll = $(window).scrollTop();
     if (_scroll > 0) {  _html.addClass('scrolled'); } 
     else { _html.removeClass('scrolled'); }
   });


})();

然后是JS/jQuery（添加/删除类）

;(function() {

   /* this is the scroll */
   var _html = $('html');
   $(window).scroll(function(){
     var _scroll = $(window).scrollTop();
     if (_scroll > 0) {  _html.addClass('scrolled'); } 
     else { _html.removeClass('scrolled'); }
   });


})();

可以看到这个-当“scrolled”类被添加到

标记中时，它现在也可以用于其他领域/css事物

---

正如您的评论，是的，您可能希望在滚动上更友好（在这种情况下不是很糟糕），但如果是这样，这将使功能仅在滚动停止时启动

var _html = $('html'), var kinder;
$(window).scroll(function(){
 /* stop the function running until stop  */
 clearTimeout(kinder);
 kinder = setTimeout(function() {

  var _scroll = $(window).scrollTop();
    if (_scroll > 0) {  _html.addClass('scrolled'); } 
    else { _html.removeClass('scrolled'); }

 },300);
});

---

---

编辑：将半透明度更新为q

我想我必须更改代码，使其不在每次滚动页面时都进行检查，否则每次都会褪色？+添加类很好/经得起未来的考验，因为不支持css动画的浏览器将退回到简单的

透明度：0