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?
Druckbare Version
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?
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() );
});
});
Uff...
Ich bin kein Progger.
Gibts dafür schon ne fertige Lösung?
Oder kannst du mir ein paar Schnippsel/Anleitungen geben?
Danke
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");
}
});
});
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?
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>
Als zusätzlichen Headtag kommt folgender JS-Fehler:
Code:TypeError: $(...).ready is not a function
$(document).ready(function() {
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.
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>
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?
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.
Doch, ich verwende beides ;).
Dachte nicht, das es so tricky ist...
Ich versuche mal eine andere Option.
Hab hier noch was ganz einfaches gefunden
http://www.marcofolio.net/webdesign/...ar_or_box.html
Super, dies geht easy einzubinden.
Danke