PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Div soll beim herunterscrollen mitwandern
Beitrag
<blockquote data-quote="CrazyLopp" data-source="post: 2023244" data-attributes="member: 357989"><p><strong>AW: Div soll beim herunterscrollen mitwandern</strong></p><p></p><p></p><p></p><p>Ok, jetzt habe ich verstanden was du meinst. Ist relativ simpel zu lösen. In dem Tutorial werden ja als Standartwerte für Top 0px verwendet (im HTML bz. Inline-Style). Dort trägst du als erstes deinen eigenen Wert ein damit von Anfang an die richtige Position erreicht ist. </p><p></p><p>Nun kommt doch etwas Javascript ins Spiel, denn du musst die aktuelle Position der Navigation abfragen. Hierzu kannst du folgenden Abfrage innerhalb der <em>setNavPosition</em> eintragen: </p><p></p><p>[CODE]</p><p>if(targetPosition == 0) {</p><p> $('#navigation').animate({top: "250"}, 1000);</p><p>}</p><p>[/CODE]</p><p></p><p>Nun wandert die Navigation automatisch wieder nach unten sobald sie auf 0 steht. Sofern Du jedoch nicht möchtest das sie wieder runter wandert, sondern ab einer gewissen Anzahl von Pixel nach Oben stehen bleibt, so kannst du den Codeblock, der oben steht wieder löschen und musst nur diesen Abschnitt deinen Wünschen anpassen: </p><p></p><p>[CODE]</p><p>try {</p><p> if (document.body.scrollTop > document.documentElement.scrollTop) {</p><p> var targetPosition = document.body.scrollTop;</p><p> } else {</p><p> var targetPosition = document.documentElement.scrollTop + 120;</p><p> }</p><p>}</p><p>[/CODE]</p><p></p><p>Dort wo die 120 stehen kannst du deinen gewünschten Wert eintragen. Es bedeutet einfach nur das er mindestens 120 Pixel von oben Platz halten soll sofern die Navigation wieder nach oben rutsch. Probier es einfach mal aus, ich habe es nur mal kurz im Chrome gestetet, sollte aber auch in den anderen Browsern funktionieren...</p><p></p><p></p><p>Beste Grüße</p></blockquote><p></p>
[QUOTE="CrazyLopp, post: 2023244, member: 357989"] [b]AW: Div soll beim herunterscrollen mitwandern[/b] Ok, jetzt habe ich verstanden was du meinst. Ist relativ simpel zu lösen. In dem Tutorial werden ja als Standartwerte für Top 0px verwendet (im HTML bz. Inline-Style). Dort trägst du als erstes deinen eigenen Wert ein damit von Anfang an die richtige Position erreicht ist. Nun kommt doch etwas Javascript ins Spiel, denn du musst die aktuelle Position der Navigation abfragen. Hierzu kannst du folgenden Abfrage innerhalb der [I]setNavPosition[/I] eintragen: [CODE] if(targetPosition == 0) { $('#navigation').animate({top: "250"}, 1000); } [/CODE] Nun wandert die Navigation automatisch wieder nach unten sobald sie auf 0 steht. Sofern Du jedoch nicht möchtest das sie wieder runter wandert, sondern ab einer gewissen Anzahl von Pixel nach Oben stehen bleibt, so kannst du den Codeblock, der oben steht wieder löschen und musst nur diesen Abschnitt deinen Wünschen anpassen: [CODE] try { if (document.body.scrollTop > document.documentElement.scrollTop) { var targetPosition = document.body.scrollTop; } else { var targetPosition = document.documentElement.scrollTop + 120; } } [/CODE] Dort wo die 120 stehen kannst du deinen gewünschten Wert eintragen. Es bedeutet einfach nur das er mindestens 120 Pixel von oben Platz halten soll sofern die Navigation wieder nach oben rutsch. Probier es einfach mal aus, ich habe es nur mal kurz im Chrome gestetet, sollte aber auch in den anderen Browsern funktionieren... Beste Grüße [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
Div soll beim herunterscrollen mitwandern
Oben