滚动时更改标题的颜色答案

【问题标题】：change colour of header when scroll滚动时更改标题的颜色
【发布时间】：2015-06-03 07:39:33
【问题描述】：

我要马上切入正题，基本上我希望我的标题从透明（css 中没有背景属性）变为滚动时有一个白色的background-color。

我正在使用这个 JavaScript，但什么地方都没有。

$(window).scroll(function() {
    var changeNav = 'rgba(0, 0, 0, 0.36)'
    if ($(window).scrollTop() > 200) {
        changeNav = '#ffffff';
    }
    $(.header).css('background-color', changeNav);
});

另外，有没有办法让它恢复原状？所以我在页面的底部，并且标题有一个白色的background-color，但是当我滑到顶部时，JavaScript 会删除该属性吗？我一直在玩耍和搜索，但找不到任何东西。

注意：我从 Stack Overflow 上的另一个地方获得了这段 JavaScript，here

非常感谢

【问题讨论】：

你有 jquery 链接吗？
该代码是 JavaScript，或者更好的是称为 jQuery 的 JavaScript 库，因此您需要包含/调用该库才能使用它。有关 jsBin 的示例，请参见我的演示。
Change header background colour when page scrolls的可能重复

标签： javascript html css

【解决方案1】：

jsBin demo

$(.header) 应该是$(".header")

您的脚本也可以“简化”为：

$(window).scroll(function() {
    var scrolled = $(this).scrollTop() > 200;
    $(".header").css('background-color', scrolled ? '#fff' : "rgba(0, 0, 0, 0.36)");
});

注意以上内容将强制 .header 在每次滚动时更改背景颜色（甚至从#fff 到#fff）。要利用这一点并确保即使用户调整窗口大小也能获得正确的颜色：

$( function () { // DOM ready to be manipulated

   var $header = $(".header"); // Cache elements for intensive actions
   $(window).on("scroll resize", function() {
       if($(this).scrollTop() > 200){
           $header.css('background-color', "#fff" );
       }else{
           $header.css('background-color', "rgba(0, 0, 0, 0.36)" );
       }
   });

});

Ofc，请确认您已将 jQuery 库包含在文档的 <head> 中：

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

【讨论】：