问视差滚动问题(无限滚动)
EN

Stack Overflow用户

提问于 2021-05-16 00:27:04

回答 1查看 31关注 0票数 1

我没有任何经验，只是摆弄一些代码。我正在尝试制作一个视差页面，有三排建筑层叠在彼此的顶部。(第一层向上移动，第二层向下移动，第三层也向下移动，但移动速度更快)。起初一切都很顺利，但是如果我滚动到页面的底部，最后一排建筑物就会无限地向下移动。有没有办法阻止它移动？

下面是完整的代码；

let city2 = document.getElementById('city-2');
let city3 = document.getElementById('city-3');
let header = document.getElementById('header');

window.addEventListener('scroll', function() {
  let value = window.scrollY;

  city2.style.top = value * 0.5 + 'px';
  city3.style.top = value * 1.2 + 'px';
  header.style.top = value * 0.8 + 'px';
})

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #fff;
  min-height: 100hv;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
}

#header .logo {
  color: #094b65;
  font-weight: 700;
  font-size: 2em;
  text-decoration: none;
}

#header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

#header ul li {
  list-style: none;
  margin-left: 20px;
}

#header ul li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #094b65;
  border-radius: 20px;
}

#header ul li a:hover,
#header ul li a.active {
  background: #094b65;
  color: #fff;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  /*background: linear-gradient(to top, #98A6B3,transparent);*/
  z-index: 10;
}

section img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

section #text {
  position: absolute;
  color: #094b65;
  font-size: 10vw;
  text-align: center;
  line-height: 0.55em;
  font-family: 'Rancho', cursive;
  transform: translateY(-50%);
}

section #text span {
  font-size: 0.20em;
  letter-spacing: 2px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
}

.sec {
  position: relative;
  padding: 100px;
  background: #98A6B3;
}

.sec h2 {
  font-size: 3.5em;
  color: #fff;
  margin-bottom: 10px;
}

.sec p {
  font-size: 1em;
  color: #fff;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <header id="header">
      <a href="#" class="logo">Logo</a>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </header>
    <section>
      <img src="https://website-2.quintendesaever.repl.co/images/city-3.png" id="city-3">
      <img src="https://website-2.quintendesaever.repl.co/images/city-2.png" id="city-2">
      <img src="https://website-2.quintendesaever.repl.co/images/city-1.png" id="city-1">
    </section>
    <div class="sec">
      <h2>Parallax Scrolling Effects</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.</p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

javascript

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-16 00:48:01

当它应该停止的时候，你错过了一个条件，所以你的html主体无限增加。也没有必要把你的背景图像往下拉那么远。

let city2 = document.getElementById('city-2');
let city3 = document.getElementById('city-3');
let header = document.getElementById('header');

window.addEventListener('scroll', function() {
  const value = window.scrollY;

  city2.style.top = Math.min(value * 0.5, city2.height) + 'px';
  city3.style.top = Math.min(value * 1.2, city3.height) + 'px';
  header.style.top = Math.min(value * 0.8, header.height) + 'px';
})

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rancho&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Langar&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #fff;
  min-height: 100hv;
}

#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 30px 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10000;
}

#header .logo {
  color: #094b65;
  font-weight: 700;
  font-size: 2em;
  text-decoration: none;
}

#header ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

#header ul li {
  list-style: none;
  margin-left: 20px;
}

#header ul li a {
  text-decoration: none;
  padding: 6px 15px;
  color: #094b65;
  border-radius: 20px;
}

#header ul li a:hover,
#header ul li a.active {
  background: #094b65;
  color: #fff;
}

section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

section::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  /*background: linear-gradient(to top, #98A6B3,transparent);*/
  z-index: 10;
}

section img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

section #text {
  position: absolute;
  color: #094b65;
  font-size: 10vw;
  text-align: center;
  line-height: 0.55em;
  font-family: 'Rancho', cursive;
  transform: translateY(-50%);
}

section #text span {
  font-size: 0.20em;
  letter-spacing: 2px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
}

.sec {
  position: relative;
  padding: 100px;
  background: #98A6B3;
}

.sec h2 {
  font-size: 3.5em;
  color: #fff;
  margin-bottom: 10px;
}

.sec p {
  font-size: 1em;
  color: #fff;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <header id="header">
      <a href="#" class="logo">Logo</a>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </header>
    <section>
      <img src="https://website-2.quintendesaever.repl.co/images/city-3.png" id="city-3">
      <img src="https://website-2.quintendesaever.repl.co/images/city-2.png" id="city-2">
      <img src="https://website-2.quintendesaever.repl.co/images/city-1.png" id="city-1">
    </section>
    <div class="sec">
      <h2>Parallax Scrolling Effects</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras fermentum odio eu feugiat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Mi tempus imperdiet nulla malesuada pellentesque. Urna molestie at elementum eu. Arcu cursus euismod quis viverra nibh cras pulvinar mattis. Ut faucibus pulvinar elementum integer enim neque volutpat. Elementum sagittis vitae et leo duis ut diam quam. Facilisis magna etiam tempor orci eu lobortis elementum nibh tellus. Non odio euismod lacinia at quis risus sed. Augue eget arcu dictum varius duis at consectetur lorem donec. Ut sem nulla pharetra diam. Integer feugiat scelerisque varius morbi enim nunc.<br><br>Vestibulum rhoncus est pellentesque elit. Lectus arcu bibendum at varius. Blandit cursus risus at ultrices. Est velit egestas dui id ornare arcu odio ut sem. Tempor orci eu lobortis elementum nibh. Pellentesque nec nam aliquam sem et tortor consequat id porta. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Malesuada nunc vel risus commodo viverra maecenas accumsan lacus vel. Senectus et netus et malesuada fames. A pellentesque sit amet porttitor eget dolor morbi non arcu. Duis tristique sollicitudin nibh sit amet commodo nulla. Dictum varius duis at consectetur. Egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Sed augue lacus viverra vitae congue.<br><br>Gravida cum sociis natoque penatibus et magnis dis parturient. Duis ut diam quam nulla. Faucibus turpis in eu mi bibendum neque. Lorem ipsum dolor sit amet consectetur adipiscing elit ut aliquam. Commodo quis imperdiet massa tincidunt nunc pulvinar. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget egestas. Porttitor lacus luctus accumsan tortor posuere ac ut. Molestie at elementum eu facilisis sed odio morbi. Nec nam aliquam sem et tortor consequat. Faucibus interdum posuere lorem ipsum. Tincidunt lobortis feugiat vivamus at augue eget. Amet venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc sed velit dignissim sodales ut eu sem. Dictum varius duis at consectetur lorem donec massa. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at.</p>
    </div>
    <script src="script.js"></script>
  </body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67548932

复制

相似问题

问视差滚动问题(无限滚动)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视差滚动问题(无限滚动)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视差滚动问题(无限滚动)
EN