Pure CSS overlay scrolling

Question

using only css and html, is it possible to scroll away the inner div (overlay red div) completely before scrolling down the rest of the page? Essentially, wondering if overlay scrolling while freezing the behind div is possible in only css? Then once the red div is gone, unfreeze the background scrolling and continue on. Similar to this site here: https://humaan.com/ . Or would some sort of JavaScript need to be used?

.headervideo{background-color:blue; width:100%; height:900px;}
.headerbreak{width:100%; height:300px;}

.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

<div class="headervideo">
  <div id="inner-box"></div>
</div>

<div class="headerbreak">
<div>

Temani Afif · Accepted Answer · 2021-01-02T10:16:42.137

position:sticky can approximate this:

.headervideo {
  background: url(https://picsum.photos/id/1064/800/800) center/cover;
  height: 100vh;
  position: relative;
  z-index: 2;
}

.nextsection {
  background: url(https://picsum.photos/id/107/800/800) center/cover;
  height: 100vh;
  margin-top: -100vh;
  position: sticky;
  top: 0;
}

.container {
  height:200vh;
}

body {
  margin: 0;
}

<div class="container">
  <div class="headervideo"></div>

  <div class="nextsection"></div>
</div>

<div style="height:150vh"> more content later </div>

score 1 · Answer 2 · answered Dec 31 '20 at 08:36

With CSS, you could use the hover event to detect a certain scroll position (e.g. on something just after the red div), but this would not work on touch only devices like mobile phones. It also wouldn't be reliable, as the cursor could be anywhere on the screen.

Using JavaScript to detect scroll position would be necessary. However, you could use the JavaScript only to add a class at different scroll positions and then do the rest with CSS. Here's a simple example:

var red = document.querySelector('#inner-box');
var begin = red.scrollTop;
var end = begin + red.clientHeight;

console.log(begin)

document.body.classList.add('in');

window.addEventListener("scroll", (event) => {

  if(this.scrollY < begin) {
    document.body.classList.add('before');
    document.body.classList.remove('after');
    document.body.classList.remove('in');
  } else if(end < this.scrollY) {
    document.body.classList.remove('before');
    document.body.classList.add('after');
    document.body.classList.remove('in');
  } else {
    document.body.classList.remove('before');
    document.body.classList.remove('after');
    document.body.classList.add('in');
  };
});

.headervideo {
  background-color: blue;
  width: 100%;
  height: 900px;
}

.headerbreak {
  width: 100%;
  height: 300px;
}

.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

body {
}

body.before {
  background-color: lightgreen;
}

body.in {
  background-color: lightpink;
}

body.after {
  background-color: lightblue;
}

<body>
  <div class="headervideo">
    <div id="inner-box"></div>
  </div>

  <div class="headerbreak">
    <div>
</body>

Pure CSS overlay scrolling

2 Answers2

Linked