Pure CSS overlay scrolling

微笑、不失礼 提交于 2021-02-10 12:54:46

问题


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>

回答1:


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>



回答2:


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>


来源:https://stackoverflow.com/questions/65518213/pure-css-overlay-scrolling

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!