HTML: Position eines Elements nur bis zu einer bestimmten Position verschieben

 

 

Wie stellt man es ein, dass ein HTML-Element nur bis zu einer bestimmten Position verschoben wird, wenn der Browser die Seite bewegt?

 

Ansicht Browser

In diesem Beispiel wird der DIV Bereich auf einer Webseite nur bis zur oberen Kante des Fensters verschoben. Das Element bleibt also immer sichtbar und im sichtbaren Bereich der Webseite im Browsers.

 

Lösung: HTML und Javascript

 

In der oberen Position

Wenn die Seite rechts nach unten gescrollt wird, dann wandert die Anzeige auf der linken Seite nur bis zur oberen Kante

 

Umsetzung im Script:

Für die Umsetzung benötigt man auf der HTML Webseite ein HTML-Element als DIV-Container.

Das Element benötigt eine id als Kennung und die Position als fixed mit angeben zum linken und oberen Abstand.

<div id="divAd_Left" style="position:fixed;top:36px;left:0px;">      ..Content…      ..Content…      ..Content… </div>

 

 

 

Javascript Teil

Die Umsetzung erfolgt in einfachem Javascript.

Zunächst muss jede Veränderung des Browser beim Scrollen erfasst werden. Hierzu fügt man den Event scroll an das Window an.

window.addEventListener("scroll", onScroll);

 

Beim Scrollen

Sobald gescrollt wird, wird geprüft, wo sich das aktuelle HTML Element im Client-Browser befindet.

Die Position wird abgefragt mit getBoundingClientRect()

var rect_Left = divLeft.getBoundingClientRect();

 

Dann wird geprüft, ob die obere Position einen Wert unterschreitet und gegebenenfalls wird das HTML Element dann auf die Begrenzung mit dem .style.Top-Attribut angepasst

var rect_Left = divLeft.getBoundingClientRect();     var posTop = rect_Left.top;        if (posTop < 0) {         divAd_Left.style.top = "0px";     }     else {                divAd_Left.style.top = posTop + "px";            }     //--</ Left Ad-Position >--

 

 

Javascript Code

Damit die Position zur Laufzeit angepasst wird, muss mit Javascript die .Top Einstellung des Elements geprüft und eingestellt werden.

//load HTML_Editor $(document).ready(load_View); function load_View() {     window.addEventListener("scroll", onScroll); } function onScroll() {     //--------< onScroll() >--------         //--< Left Ad-Position >--     var rect_Left = divLeft.getBoundingClientRect();     var posTop = rect_Left.top;        if (posTop < 0) {         divAd_Left.style.top = "0px";     }     else {                divAd_Left.style.top = posTop + "px";            }     //--</ Left Ad-Position >--     //--< Right Ad-Position >--     var rect_Right = divRight.getBoundingClientRect();     var posTop_Right = rect_Right.top;     if (posTop_Right < 0) {         divAd_Right.style.top = "0px";     }     else {         divAd_Right.style.top = posTop_Right + "px";     }     //--</ Right Ad-Position >--     //--------</ onScroll() >-------- }