CSS sticky header

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

CSS sticky header

Post by kukki »

Wie sollte es auch anders sein, neben dem Internet Explodierer unterstützt MS EGDE die Option nicht. Es gibt da zwar ein

Code: Select all

position: -ms-device-fixed;
, was mich aber nicht so richtig von Hocker haute, weil das nicht position: sticky ist.

Ergo habe ich folgendes Plugin benutzt, das auf Anhieb funktionierte:

Code: Select all

<script src="jquery.sticky.js"></script>
.....
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script> 
Den Nav-Bereich mit 'nem <div id="sticker"> ummanteln, JScript per <!-- JS: ...--> als Plugin laden (kann man noch durch Verschlüsseln auf Byte-Verbrauch von 25% runterdrücken)

Eventuelle Anpassungen sind notwendig in der CSS bei Text mit Bild/ Formular, aber das wird wohl jeder selber hinkriegen. Mein FlexBox-Layout hat das alles gut gefrssen und funktioniert wie gewollt.
Last edited by kukki on Tue 9. May 2017, 12:29, edited 1 time in total.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: CSS sticky header

Post by Oliver Georgi »

Warum sollte Edge position: fixed nicht unterstützen?
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: CSS sticky header

Post by kukki »

Überschrift: sticky header

Code: Select all

position: sticky;
Sorry wenn dass nicht sofort ersichtlich war, hab's oben geändert :oops:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: CSS sticky header

Post by Oliver Georgi »

wo ist der Unterschied für Deinen Einsatzzeck?
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
top
Posts: 535
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: CSS sticky header

Post by top »

Kannte ich bis eben auch noch nicht.

Zur besseren Erklärung habe ich hier mal damit etwas gespielt: https://jsfiddle.net/3uku4oL7/
Die fehlende IE- und Edge-Unterstützung ist mal wieder ärgerlich.

Sollte ich mal auf die Idee kommen so was zu brauchen, werde ich mich hoffentlich an das angepriesene javascript erinnern.
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: CSS sticky header

Post by Oliver Georgi »

Im Moment noch experimentell und man muss aufpassen, es nicht mit dem Einsatzzweck von fixed zu verwechseln. Aus meiner Sicht hat Kukki das getan.

In Boostrap existiert für sowas z.B. affix. Siehe Demo
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
update
Moderator
Posts: 6455
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CSS sticky header

Post by update »

Was dabei immer ein bisschen zu kurz kommt, ist die Überlegung, was man macht, wenn man ein sehr umfangreiches Menü dieser Art hat. Dann kann's passieren, dass das untere Ende bei kleineren Bildschirmen "out of sight" ist und man nicht mehr an diese Menüpunkte rankommt.
It's mostly all about maintaining two or three customer's sites Still supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.
Now building a venue for young artists to get wet on stage, rehearsal rooms, a studio, a guitar shop - yes I'm going to build some guitars.
User avatar
top
Posts: 535
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: CSS sticky header

Post by top »

Elemente die ich mit "fixed" festgetackert habe und bei denen die Gefahr besteht, dass wichtige Elemente am Ende unerreichbar abgeschnitten werden, verpasse ich meistens noch ein "max-height: 100%;" und "overflow-y: auto;".

So bekommt der Block dann bei Bedarf einen eigenen Scrollbalken. :wink:
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: CSS sticky header

Post by kukki »

Oliver Georgi wrote: .... von fixed zu verwechseln. Aus meiner Sicht hat Kukki das getan.
Kann ich nicht folgen, ist aber auch wurscht. STICKY wir nicht unterstützt- "fertich" und da nutzt die MS-Notaion auch nicht viel weiter.

Das Script habe ich erst einmal im Einsatz, bringt aber mit dem neuen FlexBox-Modell ein paar Hürden mit. Ich schaue mal nach einer passableren und einfachen Lösung. Bei "floating"-Lösungen klappt as super!
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: CSS sticky header

Post by kukki »

update wrote:... untere Ende bei kleineren Bildschirmen "out of sight" ist und man nicht mehr an diese Menüpunkte rankommt.
Habe ich schon mit einigen Anwendern diskutiert. Für diese Option habe ich die Redakteure/ Admins verantwortlich gemacht. Und hat geholfen, da man sich dann einfach auch Gedanken machte, wie weit man ein Menü aufdröselt oder lieber doch nicht.
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Re: CSS sticky header

Post by kukki »

Nach einigen Probieren, Lesen und wieder Probieren bin ich bei jQuery Script hängengeblieben, zumal das obige Script easy aber nicht ganz sauber bei Flexbox-Modell funktioniert. Ergo habe ich folgendes eingesetzt, was man(n) noch jederzeit modifizieren kann, aber den billigen Plätzen die beste Aussicht gibt:

Code: Select all

<!-- JS: 
$(document).on("scroll", function() 
{
  if (($(document).scrollTop() >= 'xxx')  &&  ($(window).width() >= 'yyy' ))
  {
        $(".clearHeader").addClass("fixHeader");
        $("header img").css({ "max-width" : "0", "transition" : "all 0s" }); 
  else 
  {
        $(".clearHeader").removeClass("fixHeader");
        $("header img").css({ "max-width" : "33%", "transition" : "all .5s ease 0s" });
  }
});
 -->
<!-- CSS:
.fixHeader { height:35px; position:fixed; top:0; padding: 15px;}
.fixHeader img{ margin:0;}
-->
Schon hat man auch im MS Egde einen "sticky header." Da kann man noch einiges dran machen, aber der Sinn des Ganzen ist erfüllt, die Website mit Flexbox-Modell funktioniert auch jetzt wie gewollt unter MS Egde :wink:
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: CSS sticky header

Post by Oliver Georgi »

absolute ineffizient, Wahnsinn!
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
User avatar
Oliver Georgi
Site Admin
Posts: 9888
Joined: Fri 3. Oct 2003, 22:22
Contact:

Re: CSS sticky header

Post by Oliver Georgi »

Um das ein wenig aufzulösen, solltest man grundsätzlich folgende Überlegungen anstellen:
  • Wann soll das initialisiert werden, hier ist OnReady empfohlen!
  • Dann cachen, also die zu benutzenden Elemente in einer Variablen außerhalb der Funktion speichern! So wichtig! Und wann immer möglich, mit id statt class statt <tag> arbeiten!
  • Du möchtest exakt 1 Element ansprechen, außerdem ist dann id am schnellsten und effizient
  • Gefräßige Selektoren wie 'element children' vermeiden, präziser definieren, id nehmen, denn es kann wie im Bsp. theoretisch n <header> mit n <img> darin geben
  • Nicht unnütz Stile definieren, wenn eine Elternklasse bereits alle Eigenschaften mitbringen kann
  • Immer prüfen, ob eine abzufragende Bedingung bereits erfüllt ist – dann abbrechen und nicht immer und immer wieder neu anwenden
  • Versuche aufwendige Funktionen zu vermeiden, wenn man z.B. durch Abfragen der zu setzenden Bedingung alles abkürzen könnte

Code: Select all

<!-- JS:ready
$document.on('scroll', function() {
    var $header = $('.clearHeader'), 
        $headerImg = $('img', $header), 
        $document = $(document)
        $window = $(window)
        $scrollTop = 123
        $winWidth = 123;

    $document.on('scroll', function() {
        var $isFixed = $header.hasClass('fixHeader');
        if(!$isFixed && $document.scrollTop() >= $scrollTop && $window.width() >= $winWidth) {
            $header.addClass('fixHeader');
        } else if($isFixed) {
            $header.removeClass('fixHeader');
        }
    });
});
-->
<!-- CSS:
.clearHeader img {max-width: 33%; transition: all .5s ease 0s;}
.clearHeader.fixHeader {height:35px; position:fixed; top:0; padding: 15px;}
.clearHeader.fixHeader img {margin:0; max-width: 0; transition: all 0s;}
-->
Das obige ist natürlich ungetestet und soll die Richtung zeigen.
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон
Post Reply