Hallo zusammen,
ich habe in der rechten Spalte einen Banner (160 x 600 px) und diese soll nun beim runterscrollen ab 200 px Höhe fixiert werden.
Also dann immer sichtbar sein.
Wie kann ich dies einbauen?
Habt ihr dies schon einmal umgesetzt?
Hallo zusammen,
ich habe in der rechten Spalte einen Banner (160 x 600 px) und diese soll nun beim runterscrollen ab 200 px Höhe fixiert werden.
Also dann immer sichtbar sein.
Wie kann ich dies einbauen?
Habt ihr dies schon einmal umgesetzt?
Viele Grüße aus Köln
Matu
Per Javascript die Scrollhöhe abfragen und ab dem Wert X die CSS Eigenschaft des Banners auf "fixed" setzen.
z.B.
Code:$(document).ready(function() { $(document).bind( 'scroll', function() { $("#fix").text( $(document).scrollTop() ); }); });
Geändert von Kahmoon (24.10.2014 um 11:06 Uhr)
Uff...
Ich bin kein Progger.
Gibts dafür schon ne fertige Lösung?
Oder kannst du mir ein paar Schnippsel/Anleitungen geben?
Danke
Viele Grüße aus Köln
Matu
Ja, irgendwo habe ich das hier mal gepostet. Ich such mal...
Es gibt auch ein fertiges Modul wo man das klauen kann
ow_SmoothScrollToTop blendet ab einer gewissen Scrollhöhe einen Top Button ein.
Also..meine Anleitung war für Mootools. Für jQuery gibt es aber auch ein Plugin
https://github.com/thesmart/jquery-scrollspy
Oder wie ich oben gepostet habe. Allerdings fixiert er hier sofort wenn gescrollt wird. Hier müsste man noch die Abfrage der aktuellen Höhe ergänzen.
Code:$(document).ready(function() { $(document).bind( 'scroll', function() { $("#deinBanner").css("position", "fixed"); }); });
Kurz mal gegoogelt...versuchs mal so.
Code:$(document).ready(function() { $(document).bind( 'scroll', function() { if($(document).scrollTop() > 200){ $("#deinBanner").css("position", "fixed"); }else{ $("#deinBanner").css("position", "relative"); } }); });
Geändert von Kahmoon (24.10.2014 um 11:58 Uhr)
Oh, cool. Danke für die schnelle Hilfe.
Wo muss ich den Code-Schnippsel einfügen?
Muss ich eine neue MooTools-Datei anlegen und im Seitenlayout auswählen?
Viele Grüße aus Köln
Matu
Ne, das ist für jQuery und ich hab das im Layout entweder als Template j_namefreiwählbar.html5 eingebunden oder direkt als Code bei "zusätzliche Head tags".
Du wirst drumrum auch noch die JS Scripttags brauchen.
Code:<script type="text/javascript"> .. </script>
Geändert von Kahmoon (24.10.2014 um 11:59 Uhr)
Als zusätzlichen Headtag kommt folgender JS-Fehler:
Code:TypeError: $(...).ready is not a function $(document).ready(function() {
Viele Grüße aus Köln
Matu
Hast du jQuery im Layout aktiviert?
Hast du die Scripttags drumrum gemacht?
Es sind jQuery und Mootools aktiv und das script-Tag ist eingebunden.
Habe es unter "Zusätzliche <head>-Tags" geschrieben.
Viele Grüße aus Köln
Matu
Ich habe es auch einmal als Template eingebunden, hier der Code:
Aber auch so kommt die Fehlermeldung...Code:<script> $(document).ready(function() { $(document).bind( 'scroll', function() { if($(document).scrollTop() > 200){ $("#hoch").css("position", "fixed"); }else{ $("#hoch").css("position", "relative"); } }); }); </script>
Viele Grüße aus Köln
Matu
Ich denke, das kommt durch die gleichzeitige Benutzung von jQuery und MooTools. Dazu gibt es hier im Forum einige Threads.
Ja da ist der Fehler.
Ich benötige aber beides.
Was kann ich nun machen?
Evtl. ne Mootools Variante?
Viele Grüße aus Köln
Matu
Ach du verwendest jQuery gar nicht sondern Mootools?
Dann wird dir hier geholfen :-)
http://mootools.net/forge/p/scrollspy
Den Code fürs LAyout habe ich leider nicht mehr weil ich inzwishcen jQuery verwende.
Geändert von Kahmoon (24.10.2014 um 14:12 Uhr)
Doch, ich verwende beides .
Dachte nicht, das es so tricky ist...
Ich versuche mal eine andere Option.
Viele Grüße aus Köln
Matu
Hab hier noch was ganz einfaches gefunden
http://www.marcofolio.net/webdesign/...ar_or_box.html
Super, dies geht easy einzubinden.
Danke
Viele Grüße aus Köln
Matu
Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
Lesezeichen