How to hide a semi transparent div behind another when scrolling

I’ve got two divs with different semi transparent background colours but they share the same background image. When I scroll up I’m trying to get the background image to scroll but also for the lower div to disappear behind the first (fixed) div.

jsfiddle:
https://jsfiddle.net/jollyoli/8yamuegh/12/

<body>

<div id="nav">
    Navbar
 </div>
   
<div id="content">
 Content
 </div>

</body>
body {
    margin: 0;
    background-image: url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
    background-size: 100% auto;
 }
 
 #nav {
    top: 0;
    position: fixed;
    height: 60px;
    width: 100%;
    background-color: rgba(153, 50, 204, 0.7);
    z-index:1;
 }
 
 #content {
    position: relative;
    top: 60px;
    height: 2000px;
    width: 100%;
    background-color: rgba(176, 224, 230, 0.7);
 }

Is there a way to make both the text AND the background colour fade so it appears they are disappearing behind the top div? Or is there another way to arrange the layers or use z-index values that maintains the background image? Anything I try only gets part of the effect.

Thanks.

1 thought on “How to hide a semi transparent div behind another when scrolling”

  1. you can use JS to achieve your goal, by setting event to fire on scroll

    use this JS script into your fiddle and try

    var nav = document.querySelector('#nav');
    
    window.onscroll = function() {
    if (document.documentElement.scrollTop > 20) {
    nav.style.opacity = "0.1";
    } else {
    nav.style.opacity = "1";
    }
    }
    
    Reply

Leave a Comment