如何在滚动上移动元素？ [复制]答案

【问题标题】：How do you move an element on scroll? [duplicate]如何在滚动上移动元素？ [复制]
【发布时间】：2021-06-22 06:06:13
【问题描述】：

我对 HTML 和 CSS 有点陌生，我查找的所有答案都对我不起作用和/或我不理解它们。有人可以帮我吗？当您滚动时，我想将左三角形向左移动，将右三角形向右移动，但我已经很卡住了。谢谢！

body {
  margin: 0px;
  padding: 0px;
  background: #181818;
  font-family: sans-serif;
  overflow-x: hidden;
}
#triangle1 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #484848;
  top: 25%;
  left: 42.5%;
  z-index: -2;
}
#triangle2 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #383838;
  top: 25%;
  left: 47.5%;
  z-index: -2;
}
#triangle3 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #282828;
  top: 25%;
  left: 52.5%;
  z-index: -2;
}
a.sd {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.2);
  display: block;
  position: absolute;
  top: 60%;
  width: 100%;
  text-align: center;
}

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</head>

<body>
  <div id=triangle1></div>
  <div id=triangle2></div>
  <div id=triangle3></div>
  <a class=sd>Scroll Down</a>
</body>
</html>

jsfiddle

【问题讨论】：

您需要使用 JS 找到滚动位置并相应地移动三角形。
使用CSS，你只能做一些独立于滚动等事件的有限动画。

标签： javascript html css

【解决方案1】：

您需要使用 JavaScript 来计算这些三角形的位置。我已经根据滚动页面的百分比来计算位置。

let tri1 = document.querySelector("#triangle1");
let tri3 = document.querySelector("#triangle3");

let tri1XInitial = tri1.getBoundingClientRect().x;
let tri3XInitial = tri3.getBoundingClientRect().x;

window.addEventListener("scroll", function(e) {
  let total = $(document).height();

  let current = window.scrollY;

  let per = (current / total)

  tri1.style.left = -(tri1XInitial * per * 1.25) + tri1XInitial +  "px";
  tri3.style.left = (tri3XInitial * per) + tri3XInitial +  "px";
});

body {
  margin: 0px;
  padding: 0px;
  background: #181818;
  font-family: sans-serif;
  overflow-x: hidden;
  height: 500vh;
}

.container {           
  position: fixed;           /*Optional: For Demo Purposes*/ 
  width: 100vw; 
  height: 100vh;
}

#triangle1 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #484848;
  top: 25%;
  left: 42.5%;
  z-index: -2;
}

#triangle2 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #383838;
  top: 25%;
  left: 47.5%;
  z-index: -2;
}

#triangle3 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #282828;
  top: 25%;
  left: 52.5%;
  z-index: -2;
}

a.sd {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.2);
  display: block;
  position: absolute;
  top: 60%;
  width: 100%;
  text-align: center;
}

<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</head>

<body>
  <div class="container">
    <div id="triangle1"></div>
    <div id="triangle2"></div>
    <div id="triangle3"></div>
    <a class=sd>Scroll Down</a>
  </div>
</body>

</html>

您还可以通过这些三角形设置一些行驶距离。

let tri1 = document.querySelector("#triangle1");
let tri3 = document.querySelector("#triangle3");

let dist = 100;

let tri1XInitial = tri1.getBoundingClientRect().x;
let tri3XInitial = tri3.getBoundingClientRect().x;

window.addEventListener("scroll", function(e) {
  let total = $(document).height();

  let current = window.scrollY;

  let per = (current / total)

  tri1.style.left = -(dist * per * 1.25) + tri1XInitial + "px";
  tri3.style.left = (dist * per) + tri3XInitial + "px";
});

body {
  margin: 0px;
  padding: 0px;
  background: #181818;
  font-family: sans-serif;
  overflow-x: hidden;
  height: 500vh;
}

.container {           
  position: fixed;           /*Optional: For Demo Purposes*/ 
  width: 100vw; 
  height: 100vh;
}

#triangle1 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #484848;
  top: 25%;
  left: 42.5%;
  z-index: -2;
}

#triangle2 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #383838;
  top: 25%;
  left: 47.5%;
  z-index: -2;
}

#triangle3 {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15vh solid transparent;
  border-bottom: 15vh solid transparent;
  border-left: 15vh solid #282828;
  top: 25%;
  left: 52.5%;
  z-index: -2;
}

a.sd {
  font-size: 20px;
  color: rgba(255, 255, 255, 0.2);
  display: block;
  position: absolute;
  top: 60%;
  width: 100%;
  text-align: center;
}

<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
</head>

<body>
  <div class="container">
    <div id="triangle1"></div>
    <div id="triangle2"></div>
    <div id="triangle3"></div>
    <a class=sd>Scroll Down</a>
  </div>
</body>

</html>

【讨论】：

@TheClouse 对您有帮助吗？