javascript - 使用位置 : absolute; in CSS 时滚动条 "jerks"

Question

我需要非常快速的视差滚动来让我的背景看起来像一个旋转的轮胎。当我使用 position: absolute;在背景图像上它可以工作，但屏幕在滚动结束时突然跳起来。当我就位时:绝对；抽搐停止但视差滚动不起作用。我只是想让背景图像相对于前景移动得非常快，所以关于如何解决这个问题和/或其他自定义视差滚动速度的方法有什么建议吗？

我正在使用 bootstrap v4-alpha，以及该版本的 jquery 和 popper 的 cdn。

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  $('body').css('top', -(scrollTop * 4) + 'px');
});

body {
  background-image: url("/pexels-photo.jpg");
  /*background-repeat: repeat;*/
  position: absolute;
}

form#search {
  margin-top: 3%;
}

form#search>div.d-inline-block {
  width: 29%;
  margin: .5%;
}

form#search>div.d-inline-block#quantity {
  width: 5%;
  margin: .5%;
}

form#search>div.d-inline-block>label,
form#search>div.d-inline-block>select {
  width: 100% !important;
}

h2.text-center {
  border-bottom: solid gray;
  padding: 1.5%;
}

div.main-content {
  margin-top: 5%;
  /*its right here*/
  padding-bottom: 50%;
  background-color: white;
}

footer>small {
  margin: 1%;
  ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-toggleable-md navbar-expand-lg navbar-inverse bg-inverse justify-content-between">
<a class="navbar-brand" href="/">Cheapest Used Tires</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/tire-dealers.php">Tire Dealers</a>
<a class="nav-item nav-link" href="/why-used.php">Why Used?</a>
<a class="nav-item nav-link" href="/tire-knowledge.php">Tire Knowledge</a>
<a class="nav-item nav-link" href="/tire-products.php">Tire Products</a>
<a class="nav-item nav-link" href="/contact-us.php">Contact Us</a>
</nav>


<div class="main-content container">
<h2 class="text-center font-weight-bold">Search For My Tires</h2>
<form id="search">
<div class="d-inline-block">
<label for="width-search" class="d-block text-center font-weight-bold">Width</label>
<select id="width-search" name="width-search" class="d-block" required>
<option value="">---</option>
<option value="195">195</option>
<option value="200">200</option>
<option value="205">205</option>
<option value="210">210</option>
<option value="215">215</option>
<option value="225">225</option>
<option value="235">235</option>
<option value="245">245</option>
<option value="255">255</option>
<option value="265">265</option>
<option value="275">275</option>
<option value="290">290</option>
<option value="295">295</option>
<option value="305">305</option>
<option value="315">315</option>
<option value="325">325</option>
</select>
</div>
<div class="d-inline-block">
<label for="aspect-search" class="d-block text-center font-weight-bold">Aspect</label>
<select id="aspect-search" name="aspect-search" class="d-block" required>
<option value="">---</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="55">55</option>
<option value="60">60</option>
<option value="65">65</option>
<option value="70">70</option>
<option value="75">75</option>
<option value="80">80</option>
<option value="90">90</option>

</select>
</div>
<div class="d-inline-block">
<label for="rim-search" class="d-block text-center font-weight-bold">Rim</label>
<select id="rim-search" name="rim-search" class="d-block" required>
<option value="">---</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
</select>
</div>
<div class="d-inline-block" id="quantity">
<label for="qty-search" class="d-block text-center font-weight-bold">Quantity</label>
<select id="qty-search" name="qty-search" class="d-block">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="text-center" style="width:25%">
<input type="submit" value="Search" style="width:25%; margin:1%;" /> 
</div>

</form>
</div>
</div>
<footer class="fixed-bottom text-white bg-inverse justify-content text-center ">
<small>O&O By TXJ</small><small>Powered by Funoto</small><small><a href="#" class="disabled ">Advertise with Us</a></small>
</footer>

Live Demo

Answer 1

您可以从 body 标签中删除绝对位置以实现更平滑的滚动。