Ergebnis 1 bis 6 von 6

Thema: Scrolled to fixed

  1. #1
    Contao-Nutzer
    Registriert seit
    10.11.2011.
    Beiträge
    51

    Standard Scrolled to fixed

    Verwende die das jquery scrolledtofixed. Funktioniert alles wunderbar nur hab ich eine Problem.

    Ich lasse meinen Header und eine zweite Navigation oben am Bildrand fixen die Höhe der beiden Elemente is ca. 200px. Jetzt habe ich aber das Problem wenn ich aus der unteren Navigation eine Seite direkt anspringen will mit den Ankern scrolled der enstprechende Bereich zu weit nach oben, sodaß dieser eben um einige Pixel zu weit unten den Header rutscht.
    Gibt es eine Funktion wie ich ob die Scrollposition beeinflussen kann?

    Danke für eure Hilfe.

  2. #2
    Alter Contao-Hase
    Registriert seit
    10.05.2010.
    Ort
    Andernach / Rlp
    Beiträge
    1.158
    User beschenken
    Wunschliste

    Standard

    Hallo Folia-Cut,

    hast Du einen Link wo man sich das Anschauen kann?

    Viele Grüße
    MiTsch
    Wer nichts weiss muss alles Glauben !

  3. #3
    Contao-Nutzer
    Registriert seit
    10.11.2011.
    Beiträge
    51

    Standard

    Ja klar:

    www.folia-cut.de/contao bisher nur unter der Kategorie "Autoglasfolien" probehalber.

  4. #4
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.225
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    Das ist ein altes Problem. Lösungen gibts viele... allen gemein ist, das man Kompromisse machen muss.
    Guck mal z.B.:
    http://molily.de/css-position-fixed

    Oder:
    http://lmgtfy.com/?q=fixed+header+anker

    Bim stackoverflow Link gibts viele Ansätze.

    Gruß
    Thomas
    blucomp | Webdesign & Onlinelösungen

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

    Standard

    Einfachste Variante für deinen Fall:
    PHP-Code:
    ... {
        
    padding-top150px;
        
    margin-top: -150px;

    Wie du den Selektor auswählst bleibt dir überlassen. Beispielsweise könntest du den Artikeln (oder sonstigen beliebigen Elementen), die diesen "Versatz" haben sollen noch eine zusätzliche Klasse 'scroll-fix' oder whatever geben, dann halt:
    PHP-Code:
    .mod_article.scroll-fix {
        
    padding-top150px;
        
    margin-top: -150px;

    Den Wert von 150px kannst du natürlich auch noch entsprechend anpassen (wenn du bspw. mehr Abstand zwischen dem #hover Menü und der Überschrift haben willst). Außerdem musst du den Wert jedesmal anpassen, wenn sich die Höhe des <header> oder des #hover Menü (stark) ändert.

    Für etwaige Nebenwirkungen dieser Lösung übernehme ich keine Haftung ;P
    Geändert von Spooky (30.05.2014 um 11:02 Uhr)

  6. #6
    Contao-Nutzer
    Registriert seit
    10.11.2011.
    Beiträge
    51

    Standard

    Spooky du bist der Beste. Das klappt wunderbar, besser gehts nicht. Danke nochmal!!

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
  •