如何在滾動時使固定標題更改顏色

當我說標題時，我的意思是<h1>。但我的頁面左側有一個固定的標題，我正在使用視差，因此當我向下滾動背景div更改時。如何在滾動時使固定標題更改顏色

我想讓h1的顏色隨着向下滾動而改變，就像this website一樣。（檢查左上方的夜間標題！）。

我已經使用jQuery這樣的嘗試：

if($(window).scrollTop() > 2600) { 
    $(".leftHeaders a").css("color", "black");

，但你不要爲你向下滾動獲得色彩的涼爽過渡。

來源

2016-11-25 RhysE96

如果您檢查網頁你鏈接到你可以看到它是如何完成的; 'nightshift'的措詞是兩個獨立的SVG - 一個黑色和一個白色。然後將這些剪輯與幻燈片之間的邊界一致剪切以產生過渡效果。這遠比更改元素的CSS屬性更復雜 –

您可以看到之前已詢問的問題： [http://stackoverflow.com/questions/21757193/change-background-of-fixed-header-when -scrolling-過去元素] – Indhu

您忘記使用事件偵聽器，並試圖只更改顏色一次。

你可以嘗試這樣的事情：

$(document).on('scroll', function() { 
 
    
 
    console.log($(window).scrollTop()); 
 
    
 
    if ($(window).scrollTop() > 2600) { 
 
     $(".leftHeaders a").css("color", "black"); 
 
    } 
 
     
 
})

來源

2016-11-25 11:17:04

嘗試這樣的事：

$(window).on("scroll", function() { 
    if($(window).scrollTop() > 2600) { 
    //add black background 
    $(".leftHeaders a").css("color", "black"); 
    } 
    else { 
    //remove background 
    } 
});

你可以參考這個老問題，我發佈時間前： wrap code in a function. noob here :)

來源

2016-11-25 11:22:02

你應該把你的代碼中$（窗口）.scroll（）這樣的

$(window).scroll(function() {  
 
    if($(window).scrollTop() > 2600) { 
 
    $(".leftHeaders a").css("color", "black"); 
 
    } 
 
});

來源

2016-11-25 11:22:10 Gayane

我想你想是這個 -

$(window).scroll(function() { 
       var top = $(this).scrollTop(); 
       if (top > 2600) { 
        $(".leftHeaders a").css("color", "black"); 

       } 
       else { 
        $(".leftHeaders a").css("color", "red"); 

       } 

})

來源

2016-11-25 11:33:18

如何在滾動時使固定標題更改顏色

回答

相關問題