如何在滚动时使固定标题更改颜色

当我说标题时，我的意思是<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

如何在滚动时使固定标题更改颜色

回答

相关问题