jQuery元素位置绝对改变滚动顶部[关闭]。

Question

封闭. 这个问题需要 细节或清晰度. 目前不接受回答。

---

想改进这个问题？ 添加细节并澄清问题，通过 编辑本帖.

封闭 上月.

改进这个问题

嗨，我需要位置，使 fixed background 位置为绝对值，滚动时改变顶部。但我的div总是跳动，就像这里的一样。演示

有人知道为什么吗？

Answer 1

你的问题在你的fiddle是三角计算的滚动位置。你需要使用一个固定的顶部值的。container 而不是视差图像本身。

这个例子应该可以为您提供一些性能上的改进。

var $window = $(window);

$window.on('scroll', pi);

function pi() {
  $('.parallax-image').each(function(index, element) {
    var $element= $(element);
    $element.css('top', parseInt($window.scrollTop()) - parseInt($element.parent().offset().top));
  });
}

.container {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.parallax-image {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: url("https://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg") no-repeat center center;
  background-size: cover;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>First Test</p>
<div class="container">
  <div class="parallax-image"></div>
</div>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Second Test</p>
<div class="container">
  <div class="parallax-image"></div>
</div>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Third Test</p>
<div class="container">
  <div class="parallax-image"></div>
</div>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>

补编

如果你愿意的话，你可以用纯CSS来使用视差图像。你可以找到 一个例子在w3schools.