Question

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

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 上有标题，而标题内容所有这些都相互重叠。它们堆叠如下：

标题（下方）＆gt; Dummy-div（中）＆gt;菜单-DIV（顶部）

所以最初这个名为.overlay的虚拟div使用JQuery 隐藏，所以现在当你从顶部滚动到150 时，这个虚拟div将使用渐变{{ 1}}

DEMO

＆＃13;

fade-in()

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

Answer 2

尝试通过添加/删除类来覆盖背景属性，类似于：

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

<强> CSS

30, 1
29, 2
28, 3

在课程上方添加删除功能，如下所示：

<强> JQuery的

.gradientClass
{
  ......
}

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

2 个答案: