Ändern Sie hintergrund von festen header beim scrollen letzten Elemente

Ich versuche, die hintergrund-Farbe der meinen festen header zu ändern beim scrollen über einen bestimmten DIV-Bereichen auf der Seite, ähnlich wie diese:

http://www.adamrudzki.com/

Den Abschnitten bin ich mit don ' T haben eine Feste Höhe.

Ich habe festgestellt, das ähnliche Frage Ändern Sie hintergrund-Farbe beim scrollen

verwendet diese Geige http://jsfiddle.net/cEvJk/18/ )

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

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

Aber ich bin nicht in der Lage, um den Effekt zu erhalten, wiederholen Sie den Vorgang für alle Abschnitte.

ist header die <header> tag oder eine Klasse?
In der Beispiel Sie geben Dem header ist eigentlich der hintergrund transparent.
Können Sie zeigen Sie Ihre Geige oder irgendwelche demo-link, wo arbeiten Sie derzeit?
Hi Dhiraj Shah, hochgeladen habe ich ein Beispiel von der Website so weit zu jiraff.co.uk/demo/demo.html

InformationsquelleAutor Dale Irwin | 2014-02-13

5

Versuchen Sie dies :
```
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"});
    }
});
```
Und so weiter mit var t2 = ....

Vergessen Sie nicht, stellen höhere Werte auf der Oberseite des if's

Das funktionierte fantastisch. Vielen Dank für deine Hilfe, Nathan P!
Helfen Ihnen gerne 🙂
Ich habe bemerkt, dass die Art, wie ich es einrichten kann, machen es um etwas anders, wenn das Fenster in der Größe verändert - weißt du, ob es etwas gibt, dass getan werden könnte, um dieses Skript refresh beim browser-resize?
Siehe here

InformationsquelleAutor Serge K.
5

Könnten Sie die Dinge zu vereinfachen ein bit mit dem jQuery .each () - Methode wie diese:

Beispiel
```
$(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')
            });
        }
    });
});
```
Aus der Dokumentation:

Den .each () - Methode wurde entwickelt, um DOM-Schleifen-Konstrukten präzise
und weniger Fehler-anfällig. Wenn man es iteriert über die DOM-Elemente
Teil der jQuery-Objekt. Jedes mal, wenn der callback ausgeführt wird, ist es
übergeben Sie die aktuelle loop iteration, beginnend von 0. Noch wichtiger ist,
die callback ausgelöst wird, in den Kontext des aktuellen DOM-element, so
das Schlüsselwort this verweist auf das element.

Dies ist der Weg, es zu tun Mann. Warum würden Sie wollen, zu fest die Werte wie in den vorherigen Antworten. Stellen Sie sich vor, Sie haben mehrere Abschnitte oder, wenn Sie neue Abschnitte, die Sie möchten gehen Sie zurück zu Ihrem Skript, und fügen Sie mehr js? Das ist sicher 🙂

InformationsquelleAutor apaul

Okay, so kam ich mit DIESE GEIGE

$(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");
    }
});

InformationsquelleAutor Lokesh Suthar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.