滾動時改變頁眉的顏色

我要馬上切換到追逐狀態，基本上我希望我的標題從透明（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

滾動時改變頁眉的顏色

回答

相關問題