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标签中删除绝对位置，以便更顺畅地滚动。

使用position：absolute时滚动条“jerks”;在CSS中

1 个答案: