Navigation die sich verändert "scrolltofixed"

Hallo zusammen

Habe kürzlich diese Website entdeckt und war begeistert als ich bemerkt habe dass das Menü ab em zweiten Artikels beim verändert

Hat jemand eine Idee ob und wie man das mit Contao lösen kann?

Danke im Vorraus und Gruss
mypixel

Ho!

ich versteh grad nicht genau was du meinst? Das Menü das aufklappt wenn man scrollt? Ja das geht.

Google nach "floating fixed elements" da gibt es mehrere Beispiele.

Hier noch ein Link wo du sehen kannst, wie das arbeitet.

Ja genau! Das Menue das sich ausklappt wenn man scrollt.
Im vorraus besten Dank für die hilfestellung!

Ho!

okay dann sollte dir helfen was bizon geschrieben hat, kommt halt drauf an wie gut du mit jQuery und CSS umgehen kannst :) - wie gut kannst du das denn?

Und vielleicht hilft dir auch Joes Workshop Website mit dem Sticky Header:
http://ck2013.may17.de/sticky-header.html

CSS sollte nicht das problem sein, aber JS hab ich nicht so drauf.

http://www.frische-zitronen.de/2013/...in-contao-ein/, mit besten Dank an Jutta. eine hervorragende Step by Step, habe ich erst letzte Woche umgesetzt, funktioniert super.

Besten Dank für guten Tipps!
Soweit habe ich das von http://www.frische-zitronen.de/2013/...in-contao-ein/ nachgebaut!
Leider funkioniert es noch nicht wie gewünscht.
Ich meinte es liegt beim template.
Die CSS-ID lautet #subheader
Mein Projekt http://www.mypixel.ch

Code:

---

<script>
    $(document).ready(function() {

        // Dock the header to the top of the window when scrolled past the banner.
        // This is the default behavior.

        $('#subheader').scrollToFixed();


        // Dock the footer to the bottom of the page, but scroll up to reveal more
        // content if the page is scrolled far enough.

        $('.footer').scrollToFixed( {
            bottom: 0,
            limit: $('.footer').offset().top
        });


        // Dock each summary as it arrives just below the docked header, pushing the
        // previous summary up the page.

        var summaries = $('.summary');
        summaries.each(function(i) {
            var summary = $(summaries[i]);
            var next = summaries[i + 1];

            summary.scrollToFixed({
                marginTop: $('.header').outerHeight(true) + 10,
                limit: function() {
                    var limit = 0;
                    if (next) {
                        limit = $(next).offset().top - $(this).outerHeight(true) - 10;
                    } else {
                        limit = $('.footer').offset().top - $(this).outerHeight(true) - 10;
                    }
                    return limit;
                },
                zIndex: 999
            });
        });
    });
</script>/

---

Könnt ihr mir sagen wo der Wurm liegt?

Danke und Gruss
mypixel

Code:

---

<script src="files/js/jquery-scrolltofixed.js" type="text/javascript"></script>

---

Das haste drin, aber Punkt 6 bei Jutta finde ich in Deinem Header nicht

HTML-Code:

---

Im heruntergeladenen .zip-Archiv findest du eine html-Datei “test.html”. Öffne diese Datei mit einem Text- oder html-Editor und kopiere die Zeilen 95 bis 136 in die Zwischenablage deiner Maus und füge den Inhalt anschließend in die neue fe_page im head vor dem Ende des Head-Bereiches ein.

---

Du kannst das übrigens auch in eine eigene Datei auslagern, Dann musst Du aber zwei Dateien im Layout als zusätzliche Haedtags einbauen.

Danke, es hat geklappt!!!
Jetzt muss ich nur noch dass CSS anpassen.

Ich habe die Zeilen 95-136 zuerst in das template fe_page hinein kopiert, anstelle in abschnitt Script.

Danke und en Gruess
mypixel

Könntest Du vielleicht noch imTitel des Threads in "scrolltofixed" ergänzen, damit er später leichter gefunden werden kann

Ein kleines Problem hab ich noch!
Kann ich überhaupt scrolltofixed Navi so einstellen, dass die Navi erst nach dem runter scrollen aktiviert wird?
So das die Kopfnavigation ersichtlich ist.

Besten Dank im Vorraus
mypixel

Für mich sieht das auf der Seite erst mal richtig aus. Was genau meinst Du?

Du hast ja zuerst mal die normale Navi diese "bricht", ich meine in dem Beipiel sind es 80px, bin mir aber nicht ganz sicher) und ab da wird das CSS "scrolltofixed" geladen.

Ja sieht fast richtig aus!
Der braune Balken "scrolltofixed" darf erst beim scrollen geladen werden.

scheinst Du gerade selber glöst zu haben :)