CSS sticky header

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

CSS sticky header

Post by kukki » Mon 8. May 2017, 18:13

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.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9456
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: CSS sticky header

Post by Oliver Georgi » Tue 9. May 2017, 07:51

Warum sollte Edge position: fixed nicht unterstützen?
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

User avatar
kukki
Posts: 1661
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: CSS sticky header

Post by kukki » Tue 9. May 2017, 12:28

Ü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.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9456
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: CSS sticky header

Post by Oliver Georgi » Tue 9. May 2017, 12:51

wo ist der Unterschied für Deinen Einsatzzeck?
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

User avatar
top
Posts: 436
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: CSS sticky header

Post by top » Tue 9. May 2017, 14:55

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: 9456
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: CSS sticky header

Post by Oliver Georgi » Tue 9. May 2017, 15:24

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 | Kleintierpraxis am Georgengarten

User avatar
update
Moderator
Posts: 6372
Joined: Mon 10. Jan 2005, 17:29
Location: germany / outdoor

Re: CSS sticky header

Post by update » Wed 10. May 2017, 10:59

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 webdesign, logo design, new and old pages refresh, print BUT slowly switching to be supporter for the band Mykket Morton. Visit Mykket Morton on FB. Listen Mykket Morton and live videos on youtube.

User avatar
top
Posts: 436
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

Re: CSS sticky header

Post by top » Wed 10. May 2017, 12:28

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: 1661
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: CSS sticky header

Post by kukki » Wed 10. May 2017, 12:50

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.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
kukki
Posts: 1661
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: CSS sticky header

Post by kukki » Wed 10. May 2017, 12:54

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.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
kukki
Posts: 1661
Joined: Mon 7. Feb 2005, 20:02
Location: Strausberg bei Berlin
Contact:

Re: CSS sticky header

Post by kukki » Thu 11. May 2017, 16:51

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.8.7 Beta R544
kukki's SpIeLwIeSe 1.8.7 Beta R544, responsive

User avatar
Oliver Georgi
Site Admin
Posts: 9456
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: CSS sticky header

Post by Oliver Georgi » Thu 11. May 2017, 17:10

absolute ineffizient, Wahnsinn!
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

User avatar
Oliver Georgi
Site Admin
Posts: 9456
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: CSS sticky header

Post by Oliver Georgi » Fri 12. May 2017, 06:00

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 | Kleintierpraxis am Georgengarten

Post Reply