Margin Padding Boxen (Nav + Content)

[Sempervivum]

So funktioniert es bei mir:

    <script>
        (function () {
            var parallax = document.querySelectorAll("body"),
                speed = -0.8,
                vmain = document.querySelector('main');
            vmain.onscroll = function () {
                [].slice.call(parallax).forEach(function (el, i) {
                    var elBackgrounPos = "50% " + (vmain.scrollTop * speed) + "px";
                    el.style.backgroundPosition = elBackgrounPos;
                });
            };
        })();
    </script>

 

[Andrin.Spitzer]

Perfekt. was würde ich nur ohne dich machen DD

 

[Andrin.Spitzer]

Kannst du mir helfen dieses script auf meine nav anzuwenden?
JsFiddle

Ich möchte damit erreichen das beim hoch scrollen die nav leiste den content sauber überdeckt.

 

[Sempervivum]

Auch das ist leicht zu machen:

        nav {
            transition: background-color 0.5s;
        }

        nav.scrolled {
            background-color: lightblue;
        }

    <script>
        (function () {
            // Variablen fuer Parallax:
            var parallax = document.querySelectorAll("body"),
                speed = -0.8;
            // Variablen für Aendern des Hintergrundes der Nav:
            var vnav = document.querySelector('nav'),
                deltaScrollPos = 10;
            // Container, der gescrollt wird:
            vmain = document.querySelector('main');
            vmain.addEventListener('scroll', () => {
                // Scrollposition ermitteln:
                var scrollPos = vmain.scrollTop;
                // Fuer Parallax:
                [].slice.call(parallax).forEach(function (el, i) {
                    var elBackgrounPos = "50% " + (scrollPos * speed) + "px";
                    el.style.backgroundPosition = elBackgrounPos;
                });
                // Fuer Aendern des Hintergrundes der Nav:
                if (scrollPos < deltaScrollPos)
                    vnav.classList.remove('scrolled');
                else
                    vnav.classList.add('scrolled');
            });
        })();
    </script>

(Wie Du siehst, enthält dieses Script beides, Parallax und Umfärben der Nav).

 

[Andrin.Spitzer]

Funktioniert Perfekt.

Danke Schöön

 

[Andrin.Spitzer]

Noch eine winzige Detail frage. das <div class="item-CONTACT"> so einstellen das er sich nicht der höhe des <div class="item-REGISTER" id="sign-in"> anpasst sonder seines inhaltes?

 

[Sempervivum]

Das ist einfach, Du brauchst diesem Element nur ein align-self: center; zu geben, dann stellt sich die Höhe entspr. dem Inhalt ein. Oder, je nachdem, wie es ausgerichtet sein soll, auch flex-start oder flex-end.

 

[Andrin.Spitzer]

Perfekt.
Danke Das Ergebnis kann man hier anschauen.

https://firmenmeisterschaft-sh.ch/#home

 

[Sempervivum]

Schön, dass es funktioniert. Aber mit deinem Zertifikat stimmt etwas nicht, ich bekomme da eine Warnung von meinem Browser.

 

[Andrin.Spitzer]

Hab die domain erst seit einer stunde daher kann das gut sein.