Ich entwickle ein benutzerdefiniertes Design auf der Grundlage von PageBuilder2 (csa2.theme) für WebSphere Portal 7. Ich verwende JQuery 1.7.1. Eine der Anforderungen ist eine Fußzeile (id ist div#footer
) und eine Hilfsleiste (Klasse ist div.footer.flotante
) das liegt nur oben in der Fußzeile, während die Fußzeile istim Viewport, aber es muss am unteren Rand des Fensters schweben, während die Fußzeile nicht im Viewport ist ... irgendwie ist Facebook eine neue Timeline-Symbolleiste (zu Freunden hinzufügen usw.) oder ein soziales Widget von Mashable, nur das von unten.
Das Folgende ist ein Ausschnitt aus dem, was ich mit JQuery gemacht habe, um dies zu erhalten:
$(window).scroll(function (event) {
var barra = $("div.footer.flotante");
var offset = barra.offset();
var bh = barra.height();
var h = offset.top;
var wh = $(window).height();
var dh = $(document).height();
var y = $(this).scrollTop();
var x = dh - y - wh;
var hf = $("div#footer").height();
if (x > hf) {
barra.addClass("fixed");
} else {
barra.removeClass("fixed");
}
});
Dies sind CSS-Stile, die ich verwende:
div.footer.flotante{
background:url(../images/footerone.png) repeat-x;
width:100%;
}
div.footer.flotante.fixed{
position: fixed;
bottom: 0px;
z-index: 1;
}
Mit diesem Code konnte ich meine Symbolleiste im Falle einer HTML - Seite mit statischem Inhalt (daher Wert von dh
ist konstant). Mein Problem ist, dass es sich bei diesem Thema um eine Themenentwicklung handelt. Es wird erwartet, dass der Inhalt dynamisch in den Hauptteil des Dokuments geladen wird dh
Wert auf eine unbekannte Anzahl von Pixeln. In diesem Szenario die Berechnung für den Wert von x
nimmt den Anfangswert von dh
Dies führt zu einer falsch positionierten schwebenden Symbolleiste.
- Wie könnte ich den Wert von neu berechnen?
dh
nach dem Inhalt rendern? - Angenommen, es gibt keine solche Eigenschaft
offset().bottom
Gibt es eine Möglichkeit, das Dokument vorübergehend "umzukehren", um es zu berechnenoffset().top
Wert für meine Symbolleiste, wodurch der endgültige Wert vondh
? - Hast du noch einen Vorschlag, das zu tun, was ich versuche?
Danke im Voraus.
Antworten:
1 für die Antwort № 1Ich fand die Ursache des Problems: Es war ein absolut positioniertes Bild für ein Logo mit einem negativen Bottom-Attribut, wodurch ein zusätzlicher vertikaler Abstand unter der Fußzeile erzeugt und vergrößert wurde dh
Wert.