Im unteren Bereich des Browsers div von fest auf absolut umschalten
Ich versuche, am Ende dieses Inhalts eine Fußzeile hinzuzufügen, die den Inhalt nicht überlagert, sondern nach oben bewegt.
Der einzige Weg, wie ich es sehen kann, wäre etwas wie, wenn der Browser unten ist, entferne 'feste' Klasse auf dem linken roten '#work'.
aktualisiertHTML
%Vor%CSS
%Vor%5 Antworten
Wenn ich Ihre Frage richtig verstehe, sollte dies den Trick (obwohl es leider sehr stark von JavaScript abhängt).
%Vor%Weitere Informationen zu den Berechnungen finden Sie unter stackoverflow ist nützlich.
Bearbeiten: Andrew Haining hat seine Antwort zwischen meinen Antworten gepostet, vielleicht gebe ich ihm einen Link und vielleicht ist es eine bessere (richtige) Lösung. Leider habe ich diese Seite nicht aktualisiert, als ich Ihren Code in JSFiddle getestet habe und ich habe seine Antwort nicht gesehen.
Wenn Sie mein Skript verwenden möchten, stellen Sie sicher, dass Sie es mit verschiedenen Auflösungen testen können. Es funktioniert ganz gut für meine Auflösung in JSFiddle, ich habe keine andere getestet.
Ich bin nicht 100% sicher, was Sie wollen, aber wenn Sie position: absolute und bottom: 0 aus der Fußzeile entfernen und ein div mit class='clearboth' über die Fußzeile setzen, scheint es zu tun, was Sie brauchen .
CSS
%Vor%Dies ist eine Zeichnung von dem, was ich auf deiner Geige sehe;
Wollen Sie, dass das Rot und das Blau immer das Schwarze berühren?
Ich sehe das Rot nicht über dem Schwarzen
Sie sollten jQuery verwenden, um eine Klasse mit dem Wert position:fixed hinzuzufügen, wenn die Bildlaufposition der Seite kleiner als die Inline-Position von #work div ist. Sobald es an der Position vorbeigescrollt ist, entferne die Klasse und lasse das Element in die Reihe zurückfallen.
Sie können dies mit den folgenden jQuery-Methoden erreichen: .scrollTop() .offset().top() und $(window).height() .
In diesem Tutorial erfahren Sie, was Sie tun müssen, um die erforderlichen Ergebnisse zu erzielen , müssen Sie nur die Berechnung leicht ändern mit $(window).height() , $('#footer').height() und ein paar anderen Änderungen, um zu bekommen, was Sie wünschen.
Basierend auf der Frage, die Sie gestellt haben, denke ich, dass Sie das meinen. Das rote div sollte fixiert sein, wenn es nach oben geht, aber absolut, wenn es unter dem oberen zum Scrollen ist und das schwarze footer beim Scrollen unter dem roten sein sollte, überprüfe diesen Code, den ich für dich getan habe. Fügen Sie einfach dieses jquery-Skript hinzu und führen Sie es aus.
%Vor%Wenn es sich nicht genau um eine Parallaxe handelt, ist das etwas ähnlich wie die Parallaxe, Container, die sich mit unterschiedlichen Geschwindigkeiten bewegen, und einige Container, die fest sitzen oder scrollen, wenn sie im Ansichtsfenster einen bestimmten Versatz von oben / unten erreichen.
Es gibt ein Plugin, das es tun kann. Skrollr
Sie können Skrollr zusammen mit skrollrcss verwenden und sicherstellen, dass die Container auf dem Bildschirm eine Position einnehmen scrolltop des Fensters und des Containers speziell.
Tags und Links javascript jquery css position