Div on top of all content/window, but still able to scroll the page underneath?

HTML & CSS
1

Hi there,

I am trying to add a div that covers the whole window/page and that also allows the user to scroll and click the content on the page normally and have the div on top stay stuck there.

I currently have this:

<body>
<div id="snowfall">
page content

</div>
</body>

#snowfall{
      position:fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

but the page isn’t scrollable.

What would be the best way to do this?

Thanks!

2

Hi there toolman,

there are two issues that need your attention…

  1. the page content is insufficient for scrolling.
  2. height: 100%; does not have a parent of which to be 100%.
    If you are thinking the body element has that value you are mistaken,
    As you code stands, it is probably no more than 1em.

coothead

2 Likes
3

Thanks for the reply. Yep I realised it wouldn’t be ideal so I think I will find another solution.

4

Hi there oolman,

of course, I did not mention that I have no idea
what it is that you are actually trying to achieve. :wonky:

coothead

1 Like
5

Hi,

Sorry for bringing this up again.

The reason I was trying to create a div that appears on top of all others is to create a snow effect.

I am using this effect:

Which works ok, but when I scroll down the page, the snow disappears.

Is it possible to create the snow on top of all content so it appears on top of everything if the user scrolls?

Thanks :slight_smile:

6

Change the css at the top to this:

body:after{
  content:"";
  z-index:-1;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
  filter: drop-shadow(0 0 10px white);
}
.snowbody {
  height: 100vh;
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

@function random_range($min, $max) {
  $rand: random();
  $random_range: $min + floor($rand * (($max - $min) + 1));
  @return $random_range;
}

.snow {
  $total: 200;
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;

  @for $i from 1 through $total {
    $random-x: random(1000000) * 0.0001vw;
    $random-offset: random_range(-100000, 100000) * 0.0001vw;
    $random-x-end: $random-x + $random-offset;
    $random-x-end-yoyo: $random-x + ($random-offset / 2);
    $random-yoyo-time: random_range(30000, 80000) / 100000;
    $random-yoyo-y: $random-yoyo-time * 100vh;
    $random-scale: random(10000) * 0.0001;
    $fall-duration: random_range(10, 30) * 1s;
    $fall-delay: random(30) * -1s;

    &:nth-child(#{$i}) {
      opacity: random(10000) * 0.0001;
      transform: translate($random-x, -10px) scale($random-scale);
      animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
    }

    @keyframes fall-#{$i} {
      #{percentage($random-yoyo-time)} {
        transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
      }
      
      to {
        transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
      }
    }
  }
}

Then wrap the snow divs in a parent called snowbody.

<div class="snowbody">
  <div class="snow"></div> 
 <div class="snow"></div>
 etc...
</div>

Your normal content would then be outside of the snowbody div.

7

Thank you. That has worked, but I now have an issue with the layers. Some layers are appearing above the snow. I have tried setting the .snowbody to have a z-index of 1000, but then none of the content is clickable.

Is there an easy way round this or would I have to set every element to have a z-index greater than the snowbody?

8

You could try setting snow body to z-index:auto but set the snow div to z-index:99999 and pointer-events:none.

Add pointer-events:none to .snowbody also.

9

Thanks for the reply.

It didn’t work. There are still some elements appearing on top of the snow. I tried z-index: 100 on the snowbody but that stopped the elements from being clicked. :frowning:

This is what I now have:

.snowbody {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
   z-index:auto
}

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
    pointer-events:none;
    z-index:99999
}
10

You missed the pointer events on .snowbody :slight_smile:

11

hmmm, I have tried that but I still have elements showing on top of the snow :frowning:

12

I’d have to see your full code but unless their z-index is higher than 99999 they should be below. The pointer events will stop any clicks not working.

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.