How to hide a div behind another semi transparent div when scrolling up

Question

I want a semi transparent div to 'disappear' behind a second semi transparent div when the user scrolls up. I'm trying to avoid any overlapping opacity. Both divs share the same background image, which I also want to scroll with the page.

EDIT:

This works. To solve the overlapping opacity I duplicated the body background on the top div and gave it a higher z-index. When the user scrolls up the content disappears behind this layer.

To solve the problem of the background not scrolling I based it on this solution to scrolling a background image > jQuery on window scroll animate background image position

I changed the values so the top div and body background move simultaneously so it appears that the single background image is moving.

jsfiddle >>> https://jsfiddle.net/1rw4khgm/1/

$('document').ready(function(){

$('#bottom').scroll(function(){
var x = $(this).scrollTop();
    $('#top').css('background-position','0% '+parseInt(-x)+'px');
    $('body').css('background-position','0% '+parseInt(-x)+'px');
            });
          });

body {
    margin: 0;
    background-image: url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
    background-size: 100% auto;
    background-position: 0% 0;
 }
 
 #top {
    top: 0;
    position: fixed;
    height: 100px;
    width: 100%;
    background-image: linear-gradient(rgba(153, 50, 204, 0.7), rgba(153, 50, 204, 0.75)), url("https://i.ibb.co/PDrJKf7/chrissa-giannakoudi-0-QRZk-Whfc-A4-unsplash.jpg");
    background-size: 100% auto;
    background-position: 0% 0;
    z-index:1;
 }
 
 
 #bottom {
    position: relative;
    top: 100px;
    height: 300px;
    width: 100%;
    background-color: rgba(176, 224, 230, 0.7);
    overflow   : auto;
    overflow-x : hidden;
    overflow-y : auto;

 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

<div id="top">
    Nav
 </div>
   
<div id="bottom">
 <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content5</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content10</p>
     <p>Content</p>
    <p>Content</p>
    <p>Content</p>
 </div>

</body>

If i understand it right, so you can use JS to bind a scroll event to set opacity of nav to 0.1 on scroll. — Burham B. Soliman, Feb 17 '21 at 20:36
and please edit your post and add your code here as a snippet for better experience and to get the best from your question anytime, cause links could breaks later and users wont find the code later — Burham B. Soliman, Feb 17 '21 at 20:52

score 0 · Answer 1 · answered Feb 17 '21 at 20:47

0

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";
}
}

answered Feb 17 '21 at 20:47

Burham B. Soliman

1,380
1
9
13

Thank you for the answer :) It wasn't quite what I was after, I wanted the div to appear to slide up and 'behind' the top div. I had trouble describing the problem, I have edited it now to hopefully make more sense. I went away from using JS to change the opacity as it affected the whole div at once and I couldn't see how to get the effect of it 'sliding out of view'. Instead I just used jquery to set the motion of the background image and relied on layers for the rest. – Jolly Oli Feb 18 '21 at 16:31

How to hide a div behind another semi transparent div when scrolling up

1 Answers1