Margin Padding Boxen (Nav + Content)

So funktioniert es bei mir:
Code:
    <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>
 
Auch das ist leicht zu machen:
CSS:
        nav {
            transition: background-color 0.5s;
        }

        nav.scrolled {
            background-color: lightblue;
        }
Javascript:
    <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).
 
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?
 
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.
 
Zurück