Question

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

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

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


})();

可以看到这个 running here - 因为“滚动”类已添加到<html>标记中，它现在也可以在其他区域/ css中使用; < / p>

作为你的评论，是的，你可能希望在滚动条上更友好（对于这种情况不坏） - 但如果是这样，这将使该功能仅在滚动停止时触发。

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

褪色RGBA颜色变化

1 个答案: