RGBA颜色的渐变变化

Question

RGBA颜色的渐变变化

3

我正在尝试创建导航栏，当用户不在页面顶部时，它会渐变为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)")
        }
    }
  });
});

有什么想法吗？非常感谢！

- user3475549

我想我需要修改我的代码，以免每次滚动页面时都进行检查，否则它会每次淡出？ - user3475549

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob Sedgwick · Answer 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; }

然后使用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”类被添加到了<html>标签中，现在它也可以在其他区域/ 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