javascript 滚动过去元素时更改固定标题的背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21757193/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background of fixed header when scrolling past elements
提问by Dale Irwin
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:
我试图在滚动页面上的某些 DIV 部分时更改固定标题的背景颜色，类似于：
The sections I'm using don't have a fixed height.
我使用的部分没有固定的高度。
I've found this similar question Change background-color while scrolling
我发现了这个类似的问题在滚动时更改背景颜色
( which uses this fiddle http://jsfiddle.net/cEvJk/18/)
（它使用这个小提琴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.
但我无法获得对所有部分重复的效果。
回答by Serge K.
Try this :
试试这个 ：
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"});
}
});
And so on with var t2 = ....
等等var t2 = ...。
Don't forget to put higher values on top of the if's
不要忘记将更高的值放在if's之上
回答by apaul
You could simplify things a bit by using jQuery's .each() methodlike this:
您可以通过使用jQuery 的 .each() 方法来简化一些事情，如下所示：
$(window).scroll(function () {
$('.sect').each(function () {
var w = $(window).scrollTop();
var t = $(this).offset().top - 100;
if (w > t) {
$('header').css({
"background-color": $(this).css('background-color')
});
}
});
});
From the documentation:
从文档：
The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.
.each() 方法旨在使 DOM 循环构造简洁且不易出错。当被调用时，它遍历作为 jQuery 对象一部分的 DOM 元素。每次回调运行时，都会传递当前循环迭代，从 0 开始。更重要的是，回调是在当前 DOM 元素的上下文中触发的，因此关键字 this 指的是该元素。
回答by Lokesh Suthar
Okay so I came up with THIS FIDDLE
好的，所以我想出了这个小提琴
$(document).scroll(function () {
var x = $(this).scrollTop(),
home = $('#home'),
about = $('#about'),
work = $('#work'),
contact = $('#contact');
if (x >= home.offset().top && x < (home.offset().top + home.height())) {
$('header').css("background-color", "red");
}
if (x >= about.offset().top && x < (about.offset().top + about.height())) {
$('header').css("background-color", "green");
}
if (x >= work.offset().top && x < (work.offset().top + work.height())) {
$('header').css("background-color", "blue");
}
if (x >= contact.offset().top && x < (contact.offset().top + contact.height())) {
$('header').css("background-color", "orange");
}
});
