1

I was trying to get an overlay that darkens as I scroll down so that it hides the <body> background but it is darkening on top of both the <body> and the <div> element that is supposed to be on top (has a higher z-index value) of it. I'd really appreciate if someone could tell me what I'm doing wrong here.

HTML:

<div id="background-overlay" class="scroll"></div>
    <div id="div1" class="scroll">
    </div>

CSS:

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body { 
            background-image: 
            url('https://c4.wallpaperflare.com/wallpaper/209/417/77/pyramid- 
            history-sky-landmark-wallpaper-6930e82dc12a0d8bc657389f9011062d.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            width: 100vw;
            height: 100vh;
            background-attachment: fixed;
            z-index: -10;
        }
        #div1 {
            margin: 0 auto;
            width: 80vw;
            height: 1000vh;
            background-color: rgb(71, 38, 0);
            color: white;
            text-align: center;
            z-index: 100;
        }
        div#background-overlay {
            background-color: black;
            width: 100vw;
            height: 100vh;
            opacity: 0;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }

JS:

        var scrollDiv = document.querySelectorAll('.scroll');
        window.addEventListener('scroll', function() {
            scrollDiv.forEach(element => {
                if(element.id == 'background-overlay') {
                    scrollOverlay = window.pageYOffset *.0005;
                    element.style.opacity = scrollOverlay;
                }
            })
        });
craft9861
  • 204
  • 2
  • 8

1 Answers1

2

Just add position: relative to your #div1.

var scrollDiv = document.querySelectorAll('.scroll');
window.addEventListener('scroll', function() {
    scrollDiv.forEach(element => {
        if(element.id == 'background-overlay') {
            scrollOverlay = window.pageYOffset *.0005;
            element.style.opacity = scrollOverlay;
        }
    })
});
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background-image: url('https://c4.wallpaperflare.com/wallpaper/209/417/77/pyramid-history-sky-landmark-wallpaper-6930e82dc12a0d8bc657389f9011062d.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            width: 100vw;
            height: 100vh;
            background-attachment: fixed;
            z-index: -10;
        }
        #div1 {
            margin: 0 auto;
            width: 80vw;
            height: 1000vh;
            background-color: rgb(71, 38, 0);
            color: white;
            text-align: center;
            z-index: 100;
            position: relative;
        }
        p {
            padding-top: 150px;
        }
        div#background-overlay {
            background-color: black;
            width: 100vw;
            height: 100vh;
            opacity: 0;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1;
        }
<div id="background-overlay" class="scroll"></div>
    <div id="div1" class="scroll">
</div>

For information on how z-index behaves for positionsfixed, absolute and relative, please have a look at this excellent reference: https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements

dmuensterer
  • 1,875
  • 11
  • 26