文章/答案/技术大牛

发布

问褪色RGBA颜色变化
EN

Stack Overflow用户

提问于 2014-03-29 10:48:54

回答 1查看 587关注 0票数 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)")
        }
    }
  });
});

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

javascript

jquery

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-03-29 11:23:00

您想使用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'); }
   });


})();

可以看到这个跑到这里来 -由于‘滚动’类被添加到<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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/22730056

复制

相似问题

问褪色RGBA颜色变化
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问褪色RGBA颜色变化EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问褪色RGBA颜色变化
EN