Contao-Camp 2024
Ergebnis 1 bis 9 von 9

Thema: Sticky Header - frage zur scroll-Position

  1. #1
    Alter Contao-Hase
    Registriert seit
    20.06.2009.
    Ort
    Graz (Austria)
    Beiträge
    1.429

    Standard Sticky Header - frage zur scroll-Position

    Hallo Leute,

    ich hab eine Frage: Ich verwende folgendes jQuery. Dies tut was es tun soll. Ich hätte nur gerne eine kleinigkeit geändert.

    Wenn ich anfange zu scrollen, wird der Header kleiner. Passt auch so.
    Wenn ich jetzt aber nach oben scrolle, wird der Header erst wieder größer, wenn ich die Scroll Positino 0 erreicht habe. Ich möchte aber, dass der Header ab der Scroll Position 100 wieder größer wird nicht erst bei 0.

    Kann mir hier jemand infos geben?
    LG, Andi

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.901
    Partner-ID
    10107

    Standard

    Du hast kein JavaScript gepostet. Außerdem benötigst du ja keine "Info" sondern sondern du möchtest, dass dir jemand sagt, wie du den JavaScript Code ändern musst

  3. #3
    Alter Contao-Hase
    Registriert seit
    20.06.2009.
    Ort
    Graz (Austria)
    Beiträge
    1.429

    Standard

    Oh, sorry

    ja, stimmt, ich bräuchte hier hilfe.

    Ich hab auch schon bei ELSE ein IF eingebaut, hat aber auch nicht funktioniert.

    Code:
    <script>
    $(function(){
        $('#header').data('size','big');
    });
    
    $(window).scroll(function(){
        if($(document).scrollTop() > 0)
        {
            if($('#header').data('size') == 'big')
            {
                $('#header').data('size','small');
                $('#header').stop().animate({
                    height:'110px'
                },600);
                $('.mod_onepage_navigation a, .navbar a').animate({paddingTop: '80px'},600);
                $('.logo').animate({height: '60px', width: '236px', top: '20px'},600);
            }
        }
        else
        {
            if($('#header').data('size') == 'small')
            {
                $('#header').data('size','big');
                $('#header').stop().animate({
                    height:'250px'
                },600);
                $('.mod_onepage_navigation a, .navbar a').animate({paddingTop: '220px'},600);
                $('.logo').animate({height: '140px', width: '551px', top: '50px'},600);
            } 
        }
    });
    </script>
    Geändert von m-werk (16.11.2018 um 10:59 Uhr)
    LG, Andi

  4. #4
    Alter Contao-Hase
    Registriert seit
    20.06.2009.
    Ort
    Graz (Austria)
    Beiträge
    1.429

    Standard

    Nun, nach langem suchen bin ich jetzt so eigentlich gar nicht zufrieden mit dieser Lösung.

    Eine schönere Lösung wäre, dass der header beim Scrollen auf eine gewisse Höhe mitscrollt. (Nach oben sowie auch nach unten).
    Leider hab ich diesbezüglich noch nichts gefunden, was auch funktionieren könnte. Auch mit "position: sticky" hab ich bis dato noch nichts anfangen können.

    Bei meinem obrigen Code wird der Header kleiner, wenn ich anfange zu scrollen, und erst dann wieder größer, wenn ich die Position 0 wieder erreicht habe.

    Schöner wäre eben, dass der Header mitscrollt bis die höhe 110px erreicht wurde und wenn mann wieder nach oben scrollt, dass dieser dann auch mit dem scrollbalken höher wird.

    Kann mir hier jemand diesbezüglich bitte helfen?
    LG, Andi

  5. #5
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Schau Dir doch einfach mal die Demo von Rocksolid an. Zum Beispiel im TAO-Theme wir so etwas verwendet https://demo.rocksolidthemes.com/?th...ao&language=de
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  6. #6
    Alter Contao-Hase
    Registriert seit
    20.06.2009.
    Ort
    Graz (Austria)
    Beiträge
    1.429

    Standard

    Ja, das hab ich mir auch schon angesehen, aber ich finde das dazupassende jQuery nicht bzw. weiß nicht, wie ich es für mich anpassen könnte.

    Es gibt hier eine js-Datei "script" und dort ist ein Bereich mit // Fixed elements gekennzeichnet, welches für den Header auch verantwortlich ist. Ich kann aber leider hiermit nix anfangen.
    LG, Andi

  7. #7
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich bin auch kein Javascript-Experte.
    Wenn ich da etwas benötige gibt es für mich zwei Lösungen. Entweder ich bau mir ein Testcase und beiße mich durch den Code durch bis ich begriffen habe was da läuft oder wenn es mir zu kompliziert wird und/oder zulange dauert dann würde ich mir jemanden suchen, der mir das erledigt.

    Nachtrag: In dem Code von Rocksolid ist natürlich noch eine ganze Menge mehr drin, aber aus meinem Bauchgefühl heraus sollten sich da genügend Anregungen finden um Dein Problem zu lösen. Du musst halt den Code an Deine Bedürfnisse anpassen (z.B. Klassen)

    Nachtrag 2: Insgesamt sehe ich es aber ähnlich wie @Spooky hier. Du suchst jemanden der Dir den Code schreibt.
    Geändert von mlweb (19.11.2018 um 12:53 Uhr)
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  8. #8
    Contao-Fan Avatar von PaddySD
    Registriert seit
    26.10.2016.
    Ort
    Andechs
    Beiträge
    656

    Standard

    Schon mal bei Bootsrap rein geschaut? https://contao-bootstrap.de

  9. #9
    Contao-Fan Avatar von Ainschy
    Registriert seit
    24.06.2009.
    Ort
    Wenden
    Beiträge
    793
    Partner-ID
    5666
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    In einigen Projekten setze ich folgenden Code ein. Vielleicht hilft er auch dir:

    Code:
    <script>
        jQuery(document).ready(function() {
            jQuery(window).on("scroll", function() {
                jQuery("body").toggleClass("scrolling", jQuery(document).scrollTop() > jQuery("#header").outerHeight())
            })
        });
    </script>

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
  •