滚动浏览元素时更改固定标题的背景 [英] Change background of fixed header when scrolling past elements

问题描述

我试图在页面上的某些DIV部分滚动时更改固定标题的背景颜色，类似于：

I'm trying to get the background-color of my fixed header to change upon scrolling over certain DIV sections on the page, similar to this:

http://www.adamrudzki.com/

我正在使用的部分没有固定的高度。

The sections I'm using don't have a fixed height.

我发现了类似的问题滚动时更改背景颜色

（使用此小提琴 http://jsfiddle.net/cEvJk/18/ ）

var t = $('#about').offset().top - 100;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('header').css({"background-color":"green"});
    } 
});

但是我无法为所有部分重复效果。

But I'm unable to get the effect to repeat for all sections.

推荐答案

试试这个：

var t = $('#about').offset().top - 100;
var t1 = $('#work').offset().top - 100;

$(document).scroll(function(){
    if($(this).scrollTop() > t1) {   
        $('header').css({"background-color":"blue"});
    } else if($(this).scrollTop() > t) {   
        $('header').css({"background-color":"green"});
    } else {
        $('header').css({"background-color":"#520833"});
    }
});

等等 var t2 = ... 。

如果的

这篇关于滚动浏览元素时更改固定标题的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！