页面滚动时更改页眉背景颜色

Question

我一直在寻找解决办法，但是无法使其工作。

当用户开始滚动页面时，我希望我的页面标题栏可以从透明背景变为白色背景。

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, 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;   
}

- iamdanmorris

---

我还没有尝试过那个。 - iamdanmorris

Answer 1

$(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/

如果用户从顶部滚动超过 50 像素，将会为该元素添加 background-color: #fff。

这将添加一个类名“active”，以便您可以在 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规则，否则背景颜色将不会改变。

- fdsugfh

---

将此脚本放置在页面底部，以确保元素已加载。您是否在CSS中创建了一个类来样式化活动标题？（例如：.active {background-color: #fff}）如果没有，请添加此小代码，如果它不起作用，请参见编辑。 - fdsugfh

现在我唯一的问题是，当导航栏的背景透明时，我想要白色的导航文字，而当滚动时，想要灰色的文字显示在白色的背景上。你觉得能帮忙吗？@sakesalverda - iamdanmorris

.header {color:#fff;background-color:transparent;} 和 .header.active {color:#777;background-color:#fff}，如果我的完整答案对您有帮助，请标记我的答案以关闭讨论。 - fdsugfh

我目前正在使用这段代码来运行我的网站，它完美地工作着。 我能否添加活动类以使标志更改以及菜单链接颜色？ - Jornes

Answer 2

这是我对此主题的简单解决方案。您只需要为元素添加一个ID以更改颜色。在我的情况下，Elementor在Advance Tab中将ID命名为“header_frame”。

将以下代码放入页脚：

jQuery(window).on('scroll', function() {
    if(jQuery(window).scrollTop() > 300) {
        jQuery('#header_frame').css('background-color', '#FFFFFF');
    } else {
       jQuery('#header_frame').css('background-color', '#EFF2F4');
    }
});

无需添加类似“active”等的类。

- Ashish Tiwari

---

请避免在没有直接相关的情况下链接到您的个人网站。如果您分享未经请求的链接，它会看起来很像垃圾邮件。请注意，除非直接涉及到所询问的问题，否则不要包含任何其他内容。 - cigien