/ / JQuery: Verschieben einer Symbolleiste vom unteren Seitenrand in einem WebSphere Portal 7-Design - Jquery, CSS, Positionierung, Versatz und Ansichtsfenster

JQuery: Verschieben einer Symbolleiste vom unteren Seitenrand in einem WebSphere Portal 7-Design - jquery, css, positioning, offset, viewport

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.

Schema von dem, was ich tun möchte

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 dhDies führt zu einer falsch positionierten schwebenden Symbolleiste.

  1. Wie könnte ich den Wert von neu berechnen? dh nach dem Inhalt rendern?
  2. Angenommen, es gibt keine solche Eigenschaft offset().bottomGibt es eine Möglichkeit, das Dokument vorübergehend "umzukehren", um es zu berechnen offset().top Wert für meine Symbolleiste, wodurch der endgültige Wert von dh?
  3. Hast du noch einen Vorschlag, das zu tun, was ich versuche?

Danke im Voraus.

Antworten:

1 für die Antwort № 1

Ich 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.