使用Javascript和RGBA更改背景颜色渐变

Question

尝试触发标题的背景颜色更改。 想法是，当页面从顶部向下滚动到150 px时，颜色从纯色变为渐变色。 所以我不确定这里的代码是否正确.....

jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 150) {
         jQuery('.site-header').css({'background': 'rgba(255,255,255,1)', 'background': '-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)', 'background': '-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(65%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));', 'background': '-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);', 'background': '-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%);', 'background': '-ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)', 'background': 'linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,0) 100%)', 'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 )' }); 
    }
});

这是HTML的简化版本：

<header id="masthead" class="site-header banner" role="banner"></header>

和最初的CSS：

.site-header { background: rgba(255,255,255,1); transition: background .25s ease-in-out; -moz-transition: background .25s ease-in-out; -webkit-transition: background .25s ease-in-out;position: fixed; display: block; margin: 0 0 30px 0; width: 100%; z-index: 1; }

我的想法是我最终想通过渐变使CSS从渐变过渡到纯色背景。

知道我在代码中搞砸了吗？

Answer 1

用不同的棘手解决方案再次回答整个问题。 由于您正在使用JQuery ，因此这是最好的技巧。

特技：

我们将在您的渐变背景下放置一个虚拟div 。 这将在<header>和您的另一个internal-div （您需要添加此内容以保存标题内容）。

现在，这里有一个虚拟div 头和该头的内容 ，它们全部相互重叠。 它们像这样堆叠：

标题（下）> Dummy-div（中）> Menu-div（上）

因此，最初使用JQuery 隐藏了一个名为.overlay虚拟div，因此，当您从顶部滚动到150时 ，此具有渐变的虚拟div将fade-in()

演示

 function overlayHeight(){ var hOfHead = $('header').outerHeight(); $('.overlay').css('height', hOfHead + 'px'); } overlayHeight(); $(window).on('resize', function(){ overlayHeight(); }); $('.overlay').hide(); $(window).scroll(function(){ if ($(this).scrollTop() > 150) { $('.overlay').fadeIn('slow'); } if($(this).scrollTop() < 150) { $('.overlay').fadeOut('slow'); } }); 

 /* CSSTerm.com Simple CSS menu */ body { width:100%; margin:0px; } header { position:fixed; margin:0px; top:0px; width:100%; background:#2b2937; z-index:999; } header .overlay { display:inline-block; position:absolute; width:100%; left:0px; right:0px; background: -webkit-linear-gradient(red, blue); /* For Safari 6.1 to 6.0 */ background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, blue); /* Standard syntax (must be last) */ z-index:-1; } .menu { margin:0px; width:100%; z-index:999; } .menu ul { text-align:center; width:100%; padding:0px; margin:0px; list-style:none; } .menu ul li { display:inline-block; padding:10px 35px; } a{ color:white; text-decoration:none; } p{ position:relative; padding:20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header id="masthead" class="site-header banner" role="banner"> <span class="overlay"></span> <span class="menu"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </span> </header> <br> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 

Answer 2

只需尝试通过添加/删除类来覆盖background属性，就像这样：

在以下位置添加渐变的背景属性：

的CSS

.gradientClass
{
  ......
}

添加删除上面的类，如下所示：

jQuery查询

jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > 150) {
         jQuery('.site-header').addClass('gradientClass');
    }
    else{
         jQuery('.site-header').removeClass('gradientClass');
    }

});