滚动时改变页眉的颜色

我要马上切换到追逐状态，基本上我希望我的标题从透明（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会将该属性取出？我一直在玩和寻找，但找不到任何东西。

注：我已经得到了从堆栈溢出另一个地方这一块的JavaScript，here

谢谢你这么多

来源

2015-06-02 Josh Murray

你有jQuery链接？ – www139

该代码*是* JavaScript或更好的称为[jQuery]（https://jquery.com/）的JavaScript库，因此您需要包含/调用该库以便使用它。看我的演示jsBin的例子。 –

[页面滚动时更改标题背景颜色]可能的副本（https://stackoverflow.com/questions/28266651/change-header-background-colour-when-page-scrolls） –

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，请告你包括你的文档的<head>内部jQuery库：

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

来源

2015-06-02 23:33:29

滚动时改变页眉的颜色

回答

相关问题