Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 12593, member: 3917"]
Da war ein kapitaler Fehler hier:
[CODE]hWindow = document.querySelector('body').clientHeight[/CODE]
Body passt sich ja an die Höhe der Inhalte an und ist damit i. d. R. viel größer als die Fensterhöhe.
Dieses funktioniert jetzt bei mir:
[CODE]<!doctype html>
<html lang="en">

#top,
        #bottom {
            height: 150vh;
        }

#middle {
            height: 40vh;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
    <script>
        window.addEventListener('scroll', event => {
            const
                boundingRect = document.getElementById('middle').getBoundingClientRect(),
                hWindow = document.querySelector('html').clientHeight,
                // Startposition von der an die Opacity ansteigen soll,
                // bezogen auf die obere Kante des betr. Containers:
                startPos = hWindow,
                // Mittlere Position wo die Opacity 1 erreichen soll:
                centerPos = hWindow / 2 - boundingRect.height / 2,
                // Endposition wo die Opacity wieder auf 0 zurück gehen soll:
                endPos = -boundingRect.height;
            if (boundingRect.top > centerPos) {
                opacity = 1 - (boundingRect.top - centerPos) / (startPos - centerPos);
            } else {
                opacity = 1 - (centerPos - boundingRect.top) / (centerPos - endPos);
            }
            if (opacity < 0) opacity = 0;
            if (opacity > 1) opacity = 1;
            document.getElementById('middle').style.opacity = opacity;
        });
    </script>
</body>

</html>[/CODE]
[/QUOTE]

Authentifizierung