Scrollabstand vom oberen Rand der Seite trotz Fensterhöhe beibehalten

Question

Ich ändere die Hintergrundfarbe meiner Seite basierend auf der Bildlaufposition vom oberen Rand der Seite, aber ich möchte alle Farben unabhängig von der Höhe von das Fenster. Was ich jetzt habe, basiert ausschließlich auf der Anzahl der Pixel, die die Schriftrolle vom oberen Rand der Seite ist, aber Sie werden sehen, dass das von der Fensterhöhe abhängt. Wie kann ich dies ändern, damit es immer durch alle Farben scrollt, auch wenn die Größe des Browsers geändert wird?

Was ich bisher haben: http://jsfiddle.net/keith/P7ER3/

Answer 1

Sie die die percent difference zwischen window.outerHeight und window.pageYOffset verwenden können.

window.outerHeight // the pixel height of the browser's frame. 

    window.innerHeight // the pixel height of the document within the browser's frame. 

    window.pageYOffset // reflects the current vertical pixel 
         // location of the top-left corner of the document. 

---

var perDiff = window.pageYOffset/(window.outerHeight + window.innerHeight); 

    perDiff; // 0 when the scroll is on the top 

    perDiff; // 1 when the scroll is on the bottom of the page 

Statt position können Sie perDiff Wert, verwenden, die zwischen 0 und 1 wird immer von ihm eine neue Farbe zu berechnen.

P.S. in jfiddle soll dieser code nicht funktionieren, weil perDiff auf die höhe des dokuments und nicht auf den frame verweist.

Answer 2

Versuchen Sie diese Zeile zu ändern:

scroll_pos = $(document).scrollTop(); 

dazu:

scroll_pos = $(document).scrollTop() % 800; 

die Position Modulo 800 Taking wird es im Grunde auf Null zurückgesetzt, wenn Sie über 800px blättern.

Answer 3

Dies ist die Dokumente Höhe: $(document).height()

Und das ist das heipt des Darstellungs: $(window).height()

Die Differenz beider Werte gibt die maximale Anzahl von Pixeln, die (falls positiv) nach unten gescrollt werden kann:

var max_scroll = $(document).height() - $(window).height(); 

Schließlich wird dies eine nuber zwischen 0 und 1 zurück, die dem Scroll-Betrag entspricht:

var scrollamount; 
if (max_scroll > 0.0) { 
    scrollamount = $(document).scrollTop()/max_scroll; 
} else { 
    scrollamount = 0.0; 
} 

Sie können diesen scrollamount verwenden, der immer zwischen 0 und 1 liegt, um daraus eine neue Farbe zu berechnen.