"Kopfzeile" nicht mitscrollen

  • Moin moin Gemeinde,
    ich hab da ein kleines Problem.
    Ständig scrolle ich durch diverse Foren
    und dabe passiert es mir nur all zu oft
    das ich eine Nachricht an mich nicht sehe.
    Daher meine Frage.
    Lässt sich die Kopfzeile, siehe Bild, vom
    scrollen des Forums herausnehmen?

    Sprich den oberen Teil am oberen Bildschirmrand sozusagen festnageln.

  • Super und Danke für die schnelle Info,
    Leider fehlt mir momentan noch das Wissen wo ich das einfügen muss.
    Für jeden Style? Oder in einer Datei für alle?
    Wäre nett wenn ich dafür noch einmal Hilfe bekommen könnte.

  • eine Frage dazu:

    wenn der Header fixed ist, generiert man sich ja ein kleines Problem: Bei einem Klick auf "Antworten" in einem Thread wird der Inhalt ja nach oben geschoben, damit das Redactor Eingabefeld ganz oben steht - und dies schiebt sich bei einem fixed-Header dann unter den Header. Vor allem wenn man nun zB einen höheren Header hat und wenn dann noch der Footer höher ist (sonst geht es sich ja nicht ganz aus bis oben).


    Gibts dafür eine Lösung?

    In den JS-Dateien wird dies ja mit WCF.Effect.Scroll umgesetzt, aber hier kann man ja schwerlich einen zusätzlichen Offset angeben...

  • Gute Frage, vor allem da man ja auch noch <= 800 px und > 801 px unterscheiden muss. <= 800px macht der Balken in der Regel keinen Sinn, weil er zuviel Fläche wegnimmt.

    Meiner Ansicht nach geht das nur über JS und einen zusätzlichen Offset in Höhe des Balkens.

    Grüße, CCFF

  • vor allem da man ja auch noch <= 800 px und > 801 px unterscheiden muss. <= 800px macht der Balken in der Regel keinen Sinn


    das ginge ja einfach mit einer media-query im css die nur über 800px greift, aber das mit dem Scrollen wird nicht so einfach...
    In der WCF.js steht das

    und ich weiss nicht, warum die Zeilen 5571 - 5573 auskommentiert sind, denn die wären genau das, was dafür notwenig wäre, denn diese würden in dem Fall das #topMenu-div dazugeben und nicht soweit rauf scrollen.
    Vielleicht könnte man mit jQuery einen imaginären Offset für window.height oder document.height definieren, der dann greift, aber ich wüsste nicht wie...

  • Mit media queries kannst Du nur CSS/LESS beeinflussen, nicht JS.

    Zum Auslesen der Screenbreite musst Du eine JS-Funktion schreiben oder eine bestehende verwenden. Das sollte aber kein Problem sein.

    Hast Du schon mal geschaut was passiert wenn Du den auskommentierten Code aktivierst?

    Grüße, CCFF

  • Hast Du schon mal geschaut was passiert wenn Du den auskommentierten Code aktivierst?

    ja klar - aber ein wenig anders.
    wenn du statt dem Auskommentierten bzw. nach Zeile 5573 folgenden Code einsetzt, funktioniert es einwandfrei...

    JavaScript
    if($(window).width() > 800) {$elementOffset = $elementOffset - 65;} // --> 65 = Höhe des Headers
  • Na also, geht doch. Der Breakpoint ist allerdlngs bei 801 px. ;)

    Jetzt musst Du das nur noch in die WCF.js minifizieren und die WCF.min.js ersetzen. Die WCF.js wird nur im Debugmodus verwendet. Falls es updatetauglich sein soll, müsstest Du ein entsprechendes Plugin schreiben.

    Grüße, CCFF

  • Die min-width = 801 px, nicht 800. Schau mal in die CSS/LESS Dateien.

    Das mit dem Plugin ist etwas aufwändiger. Leider gibt es keine wirklich gute Doku auf die ich Dich verweisen kann. Einiges ist wie in WCF 1.1 (dafür gibt es ein pdf von Woltlab), einiges ist aber auch wieder anders. Auf Kittblog gibt es ein Tutorial wie man grundsätzlich ein Plugin erstellst. Auf wcfdoku gibt es einige Erklärungen und Beispiele. Du kannst auch mal hier im Forum suchen, da gab es einen Thread mit Sammlungen zu Anleitungen. Zusammengefasst: PITA.

    Grüße, CCFF

  • Danke. :thumbup:

    aber betreffend min-width... ja eh.
    @Media (min-width: 801px) { -- >heisst ja bei = 800 Pixel nicht fixed und bei 801 Pixel ist er fixed.

    und

    if($(window).width() > 800) { --> heisst bei = 800 nicht fixed und bei größer 800 (also ab 801) fixed....

    :whistling:

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!