 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Briziel
Threadersteller
Dabei seit: 09.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 11.02.2010 22:56
Titel
|
  |
|
wäre es an und für sich eigentlich möglich nicht einfach zu der fixen position des divs in abhängigkeit von der position des scrollbars einfach neue X oder Y werte in die CSSposition einzufügen
also jetzt in schreibcode:
<javascript
position-scrollbar = "PageYOffset"
>
<CSS
#bewegterdiv
position="fixed"
top="position-scrollbar"
>
<div id="bewegterdiv"
bllablab
/>
aber dann wäre das problem der dass es nur bei rückgabe beweglich wird oder? also wäre die benutzung von ner biblithek wie jquery notwendig
|
|
| |
  |
 |
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht: 
|
Verfasst Do 11.02.2010 23:07
Titel
|
|
|
| Briziel hat geschrieben: |
vielen dank. aber müsste man das dann mit jquery oder so lösen? oder wäre eine reine javascript lösung auch möglich? |
Ich würde es ohne jQuery lösen, nur mit Javascript - halt eine Funktion, die alle Sekunde durchläuft. Ob es da aus der Performance-Sicht sinnigere Lösungen mit jQuery (oder auch ohne) gibt, kann ich dir nicht beantworten.  Aber sicher wer anderes hier im Forum.
Soll nur heißen: Rein theoretisch geht es auch ohne jQuery.
|
|
| |
|
|
|
Anzeige
|
|
|
Briziel
Threadersteller
Dabei seit: 09.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Fr 12.02.2010 01:21
Titel
|
|
|
| easteregg hat geschrieben: | | Briziel hat geschrieben: |
vielen dank. aber müsste man das dann mit jquery oder so lösen? oder wäre eine reine javascript lösung auch möglich? |
Ich würde es ohne jQuery lösen, nur mit Javascript - halt eine Funktion, die alle Sekunde durchläuft. Ob es da aus der Performance-Sicht sinnigere Lösungen mit jQuery (oder auch ohne) gibt, kann ich dir nicht beantworten. Aber sicher wer anderes hier im Forum.
Soll nur heißen: Rein theoretisch geht es auch ohne jQuery. |
also wäre ohne jquery keine "live"veränderung zu sehen?
|
|
| |
|
|
Briziel
Threadersteller
Dabei seit: 09.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 16.02.2010 01:34
Titel
|
|
|
| Zitat: | Du kannst das Problem prinzipiell in 2 relativ unabhängige Teilprobleme aufspalten:
- Scrollposition auslesen und normieren (z.B. im Bereich 0.0 bis 1.0, unabhängig von der Höhe/Breite des angezeigten Dokuments und des Viewports)
- Der geeignete Wert für die left- bzw. top-Eigenschaft eines beliebigen Block-Elements berechnen, damit dieses um einen bestimmten Faktor (0.0..1.0) der Dokumentenhöhe/-breite verschoben wird.
Im Folgenden gehe ich davon aus, dass du den Effekt vertikal realisieren willst. Die Realisierung im horizontalen Fall ist dazu analog.
Theoretisch sind beide Probleme einfach zu lösen. Angenommen, du kennst den Scroll-Offset in Pixeln (scrollPos), die Höhe des Viewports (viewportHeight) sowie die Höhe des gesamten Dokuments (documentHeight). Ferner gehe ich davon aus, dass du bereits überprüft hast, dass documentHeight > viewportHeight, das Dokument also scrollbar ist.
Zu (1):
Es liegt nahe, dass der maximale Scroll-Offset documentHeight-viewportHeight ist; der minimale Offset ist 0. Demnach kannst du die aktuelle Scrollbar-Position mittels
| Code: |
scrollPos/(documentHeight-viewportHeight)
|
normieren.
Zu (2):
An dieser Stelle musst du dich zwischen absoluter Positionierung (relativ zum Dokument) und fixed-Positionierung (relativ zum Viewport; Scroll-unabhängig) entscheiden. Welches der bessere Weg ist, hängt von deinem Vorhaben ab - ich gehe im folgenden von absoluter Positionierung aus, um ältere IE-Versionen (IE 6) zu unterstützen (es ist zu bemerken, dass das fixed- und das absolute-Koordinatensystem (sofern kein Elternelement eine Referenzposition festlegt) um scrollPos gegeneinander verschoben sind).
Im Falle absoluter Positionierung beträgt die gesamte Distanz, über die das Element verschoben wird, documentHeight-elementHeight, wobei elementHeight die gesamte Höhe des Elements ist. Demnach ist die geeignete top-Eigenschaft bei einer Verschiebung um den Faktor factor (0.0..1.0)
| Code: |
element.style.top = (scrollTop + (documentHeight-elementHeight)*factor)+'px';
|
Bei der Implementierung besteht das Problem bloss darin, dass es keinen standardisierten, für alle Browser tauglichen Weg gibt, um insbesondere die Scrollposition zu ermitteln. Prinzipiell existiert mit dem [URL="http://www.w3.org/TR/cssom-view/"]CSSOM View Module[/URL] zwar ein Working Draft eines geplanten Standards, dieser wird jedoch nicht von allen Engines in demselben Masse umgesetzt.
Während Gecko- (z.B. Firefox), Presto- (Opera) und WebKit-Browser (z.B. Safari) die im CSSOM View Module beschriebene pageYOffset-Eigenschaft bereitstellen, unterstützt der IE in sämtlichen Versionen, inklusive IE 8, diese Eigenschaft nicht. Demnach wirst du kaum umhinkommen, eine Browser-Weiche zu verwenden (ausserdem musst du dafür sorgen, dass [URL="http://board.gulli.com/thread/222943-info-ursachen-von-falscher-darstellung-von-webseiten-standardsquirks-mode/"]deine Seite im Standards-Mode dargestellt wird[/URL] - dies sollte aber ohnehin selbstverständlich sein). Ein in allen verbreiteten Browsern lauffähiger Weg, die benötigten Werte zu erhalten, wäre etwa
| Code: |
var scrollPos, viewportHeight, documentHeight;
if(document.defaultView)
scrollPos = document.defaultView.pageYOffset;
else
// Trident/IE
scrollPos = document.documentElement.scrollTop;
viewportHeight = document.documentElement.clientHeight;
documentHeight = document.documentElement.scrollHeight;
|
Die angezeigte Höhe eines Elements kannst du z.B. wie im CSSOM View Module beschrieben aus der Eigenschaft meinelement.offsetHeight auslesen.
Nun musst du bloss noch die Berechnungen in einer JavaScript-Funktion umsetzen und diese als Event-Handler für das scroll- und das resize-Event registrieren. |
antwort eines gulli nutzers... vielleicht kann ja jemand von euch für mich aus diesen informationen ein einfaches sample programmieren, das ich dann auseinanderpflücken kann um es zu verstehen..
lg briziel
Zuletzt bearbeitet von Briziel am Di 16.02.2010 01:34, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Zoom abhängig von Position des Mauszeigers
Javascript: Scrollposition auslesen
CSS vom Server abhängig?
Flash: Inhalt abhängig von URL auslesen
Formular: Pflichtfelder abhängig vom Betreff
FlashMX - setInterval abhängig von mausposition
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
