javascript - 带有 JS/jQuery 滚动的纯 CSS 视差

Question

我已经设法创建了一个纯 CSS 视差，但是，当 overflow: hidden 应用于 html< 时，我在使用 scrollTop 时遇到了一些困难.

CSS 需要在 html 标签或任何相关容器上使用 overflow: hidden 和 overflow-x: hidden; overflow-y: auto 在 body 标签或任何相关容器上。

在应用 overflow 的任何情况下，无论是在 html 和 body 标签上还是在其他地方，scrollTop不起作用。

我已经能够检测到 body 上的滚动，触发 alert 或 addCLass，但我想 removeClass一旦用户向上滚动到页面顶部。

到目前为止，这是我的代码，这是在尝试使用从 html 元素中删除 overflow 的各种其他正常解决方案之后。此解决方案仅在滚动上添加相关类。

HTML

<header>
</header>
<div class="parallax">
  <div class="background"></div>
  <div class="sheet-1">
    <h1 class="page-header">My Parallax</h1>
  </div>
  <div class="sheet-2"></div>
</div>

SASS

\:root
  font-size: 10px

*, *::before, *::after
  box-sizing: border-box
  margin: 0
  padding: 0
  text-decoration: none

html
  overflow-y: auto

body
  height: 100vh
  overflow-y: auto
  overflow-x: hidden
  -webkit-overflow-scrolling: touch
  perspective: 0.1rem

header
  height: 5rem
  width: 100%
  background: black
  opacity: 0
  position: fixed
  top: 0
  left: 0
  z-index: 999
  transition: opacity 1.5s ease
  &.black
    opacity: 1
    transition: opacity 1.5s ease

.parallax
  transform-style: preserve-3d

.background
  height: 100vh
  width: 100%
  background: url('https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg')
  background-size: cover
  transform: translateZ(-0.1rem) scale(2)
  position: relative

[class*='sheet-']
  min-height: 100vh
  display: flex
  align-items: center

.sheet-1
  position: absolute
  top: 0
  left: 0
  transform: translateZ(-0.05rem) scale(1.5)

.page-header
  color: white
  font-size: 4rem
  text-align: center
  text-transform: uppercase
  letter-spacing: 0.15rem
  margin: 0 auto

.sheet-2
  background: url('https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg') no-repeat center center
  background-size: cover

JS

$("body").on("scroll",function(){
     $('header').addClass('black');
});

您可以在Codepen上查看元素here .

Answer 1

这种情况可以通过监控容器上的滚动事件来解决。

提前，对于类(class)的组织和结构不佳，我们深表歉意。正在粗略地浏览一些旧代码。

编译的 HTML

<header class="header">
  <div class="wrapper">
    <div class="backdrop" id="backdrop"></div>
    <div class="logo" id="pos"></div>
    <nav class="navi">
      <ul>
        <li><a href="#secondSection">One</a></li>
        <li><a href="=#">Two</a></li>
        <li><a href="=#">Three</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="prlx" id="prlx">
  <div class="prlx-g">
    <div class="prlx-layer prlx-bg"></div>
    <div class="prlx-layer prlx-fg sheet">
      <h1 class="page-header">My Parallax</h1>
    </div>
  </div>
  <div class="cover sheet" id="secondSection"></div>
</div>

编译的 CSS

:root {
  font-size: 10px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: sans-serif;
}

.header {
  height: 5rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0 1rem;
  position: relative;
  z-index: 5;
}
.wrapper .backdrop {
  height: 100%;
  width: 100%;
  background: black;
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.wrapper .backdrop.black {
  opacity: 1;
}
.wrapper .logo {
  height: 70%;
  width: 150px;
  background: white;
  color: black;
  font-size: 2rem;
}
.wrapper .navi ul {
  display: flex;
  list-style: none;
}
.wrapper .navi ul li {
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  margin-left: 20px;
}
.wrapper .navi ul li a {
  color: white;
}

.prlx {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-perspective: 0.1rem;
          perspective: 0.1rem;
}

.prlx-g {
  height: 100vh;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.prlx-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.prlx-bg {
  height: 100vh;
  width: 100%;
  background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
  background-size: cover;
  -webkit-transform: translateZ(-0.1rem) scale(2);
          transform: translateZ(-0.1rem) scale(2);
}

.prlx-fg {
  -webkit-transform: translateZ(-0.05rem) scale(1.5);
          transform: translateZ(-0.05rem) scale(1.5);
}

.sheet {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.page-header {
  color: white;
  font-size: 4rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15rem;
  margin: 0 auto;
}

.cover {
  background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
  background-size: cover;
  color: white;
  position: relative;
  z-index: 1;
}

Javascript

// Get Scroll Position

var prlx = document.getElementById("prlx");

prlx.onscroll = function prlxAnimation() {
 var prlx = document.getElementById("prlx");
 var scrollPos = prlx.scrollTop;
 var header = document.getElementById("backdrop");
 // document.getElementById ("pos").innerHTML = y + "px"

 if(scrollPos > 10){
        header.classList.add("black");
    }
    else {
        header.classList.remove("black");
    }

}

同一支笔仍在 Codepen 上使用 here .