MetaModels Workshop in Berlin
Ergebnis 1 bis 17 von 17

Thema: Banner beim Scrollen fixieren

  1. #1
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard Banner beim Scrollen fixieren

    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

  2. #2
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.136

    Standard

    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 10:06 Uhr)

  3. #3
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    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

  4. #4
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.136

    Standard

    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.

  5. #5
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.136

    Standard

    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 10:58 Uhr)

  6. #6
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    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

  7. #7
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.136

    Standard

    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 10:59 Uhr)

  8. #8
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    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

  9. #9
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.136

    Standard

    Hast du jQuery im Layout aktiviert?

    Hast du die Scripttags drumrum gemacht?

  10. #10
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    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

  11. #11
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    Ich habe es auch einmal als Template eingebunden, hier der Code:

    Code:
    <script>
      $(document).ready(function() {
        $(document).bind( 'scroll', function() {
           if($(document).scrollTop() > 200){
            $("#hoch").css("position", "fixed");
          }else{
            $("#hoch").css("position", "relative");
          }
    
        });
    });
    </script>
    Aber auch so kommt die Fehlermeldung...
    Viele Grüße aus Köln
    Matu

  12. #12
    Contao-Urgestein
    Registriert seit
    22.10.2013.
    Beiträge
    7.887
    User beschenken
    Wunschliste

    Standard

    Ich denke, das kommt durch die gleichzeitige Benutzung von jQuery und MooTools. Dazu gibt es hier im Forum einige Threads.

  13. #13
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    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

  14. #14
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.136

    Standard

    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 13:12 Uhr)

  15. #15
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    Doch, ich verwende beides .

    Dachte nicht, das es so tricky ist...

    Ich versuche mal eine andere Option.
    Viele Grüße aus Köln
    Matu

  16. #16
    Contao-Urgestein Avatar von Kahmoon
    Registriert seit
    22.06.2009.
    Ort
    München
    Beiträge
    4.136

    Standard

    Hab hier noch was ganz einfaches gefunden

    http://www.marcofolio.net/webdesign/...ar_or_box.html

  17. #17
    Alter Contao-Hase
    Registriert seit
    22.06.2009.
    Ort
    Köln
    Beiträge
    1.330

    Standard

    Super, dies geht easy einzubinden.
    Danke
    Viele Grüße aus Köln
    Matu

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •