phpwcms Support Forum

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  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.

Warum sollte Edge position: fixed nicht unterstützen?

Überschrift: sticky header

Code: Select all

position: sticky;

Sorry wenn dass nicht sofort ersichtlich war, hab's oben geändert

wo ist der Unterschied für Deinen Einsatzzeck?

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.

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

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.

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.

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!

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.

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

absolute ineffizient, Wahnsinn!

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.

phpwcms Support Forum

CSS sticky header

CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header

Re: CSS sticky header