使用JS / jQuery Scroll的纯CSS Parallax

Question

我设法创建了纯CSS视差，但是，scrollTop在overflow: hidden应用html时遇到了一些困难。

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

在应用overflow的任何情况下，无论是html还是body标记还是其他，scrollTop都不起作用。

我已经能够检测到身体上的滚动，要么触发alert，要么触发addCLass，但我希望removeClass一旦用户滚动回到顶部页面。

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

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

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

在此，对不起组织和班级安排感到抱歉。正在粗读一些旧代码。

编译的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上使用。

Answer 2

$(window).scroll(function(){
    var scroll= $(window).scrollTop();

<script src="https://code.jquery.com/jquery-3.3.1.min.js"/>
  
  
$(window).scroll(function(){
	var scroll= $(window).scrollTop();
$(".background").css("background-position","center "+(scroll*0.2)+"px");
});

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

<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>

希望此代码有效