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() >--------
}
|