时间戳

首页 > 解决方案 > 滚动时jQuery元素位置绝对更改顶部

html - 滚动时jQuery元素位置绝对更改顶部

问题描述

嗨，我需要fixed background使用绝对位置和滚动更改顶部来确定位置。但是我的 div 一直在跳跃，就像在演示中一样

有人知道为什么吗？

标签： htmljquerycss

解决方案

你在小提琴中的问题是滚动位置的增量计算。您需要使用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找到一个示例。

推荐阅读