jquery – 页面滚动时更改标题背景颜色

我一直在寻找一个解决方案,但我不能让它工作.

当用户开始滚动页面时,我希望我的页眉从透明背景更改为白色背景.

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></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代码是：

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 10000;
    -webkit-Box-shadow: 0 1px 5px rgba(0,0.25);
    -moz-Box-shadow: 0 1px 5px rgba(0,0.25);
    Box-shadow: 0 1px 5px rgba(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");
    }
});

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

如果用户从顶部滚动了超过50个像素,这将向元素添加背景颜色：#fff

这将添加一个“活动”类,以便您可以在css中设置它(更容易维护)

编辑：

$(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");
        }
    });
});

而你的css：

.active { background-color: #fff}

确保您还添加此css规则,或者背景颜色不会更改