页面滚动时更改标题背景颜色 [英] Change header background colour when page scrolls

问题描述

我希望我的页面标题从透明背景更改为用户开始滚动页面时出现白色背景。

HTML代码是：

 < div class =header> 
< div class =topbar>< / div> 
< div class =sitelogo>< / div> 
< nav id =navigation> 
< ul> 
< li id =twitter>< a href =http://www.twitter.com/iamdanmorris>< em> Twitter< / em>< / a>< /立GT; 
< li>< a href =＃contact>联络< / a>< / li> 
< li>< a href =＃blog>博客< / a>< / li> 
< li>< a href =＃>投资组合< / a>< / li> 
< li>< a href =＃>关于< / a>< / li> 
< li>< a href =＃>主页< / a>< / li> 
< / ul> 
< / nav> 
< div style =clear：both;>< / div> 
< / div> 
  

CSS代码为：

  .header {
 position：fixed; 
 top：0; 
剩下：0; 
宽度：100％; 
 padding：0; 
 z-index：10000; 
 -webkit-box-shadow：0 1px 5px rgba（0，0，0，0.25）; 
 -moz-box-shadow：0 1px 5px rgba（0，0，0，0.25）; 
 box-shadow：0 1px 5px rgba（0，0，0，0.25）; 
过渡：全部0.2s缓出; 
 height：auto; 
 background-color：transparent; 
} 
  

解决方案

 <$ c （$（window）.scrollTop（）> 50）{
 $（。header）。addClass （active）; 
} else {
 //删除背景属性，使其再次变为透明（在css中定义）
 $（。header）。removeClass（active ）; 
} 
}）; 
  

小提琴： http://jsfiddle.net/634d6vgq/2/

这将添加 background-color： #fff 如果用户从顶部滚动超过50个像素，元素将被添加到元素中。

这将添加一个active类，以便您可以设置样式它在CSS内（更容易维护）

编辑：
$ b

 $（window）.on（scroll，function（）{
） {
 $（。header）。addClass（active）; 
} else {
 //移除背景属性，使其再次变为透明（在css中定义）
 $（。header）。removeClass（active）; 
} 
}）; 
}）; 
  

您的css：

  .active {background-color：#fff} 
  

确保你也添加此css规则，否则背景颜色不会改变

I've been looking at a solution for this but I cannot get it to work.

I would like my page header to change from a transparent background to a white background as the user begins scrolling the page.

HTML code is:

<div class="header">
    <div class="topbar"></div>
    <div class="sitelogo"></div>
    <nav id="navigation">
        <ul>
            <li id="twitter"><a href="http://www.twitter.com/iamdanmorris"><em>Twitter</em></a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Home</a></li>
        </ul>
    </nav>
    <div style="clear:both;"></div>
</div>

CSS code is:

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 10000;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease-in-out;
    height: auto;
    background-color:transparent;   
}

解决方案

$(window).on("scroll", function() {
    if($(window).scrollTop() > 50) {
        $(".header").addClass("active");
    } else {
        //remove the background property so it comes transparent again (defined in your css)
       $(".header").removeClass("active");
    }
});

fiddle: http://jsfiddle.net/634d6vgq/2/

This will add the background-color: #fff to the element if user has scrolled more than 50 pixels from the top

This will add a class "active" so you can style it within the css (easier to maintain)

edit:

$(function() {
    $(window).on("scroll", function() {
        if($(window).scrollTop() > 50) {
            $(".header").addClass("active");
        } else {
            //remove the background property so it comes transparent again (defined in your css)
           $(".header").removeClass("active");
        }
    });
});

And your css:

.active { background-color: #fff}

Make sure you also add this css rule, orherwise the background color will not change

这篇关于页面滚动时更改标题背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！