CSS 我可以使带有固定背景附件的 div 滚动更慢吗？

Question

我正在尝试创建一些很酷的视差效果，如果我可以制作一个带有属性background-attachement: fixed 的 bg 图像的 div 滚动一点（比正常滚动慢）而不是让它静止不动，那我就开始纠结了吗？

p>

这就是我的 CSS 的样子：

.parallax{
    height: 400px !important;
    width: 100%;
    background-size: cover;
    background-attachment: fixed;
}

这是我的 div

<div class="parallax" style="background-image: url('img/image.jpg'); ">
</div>

我试过了：

$('div.parallax').each(function(){
        $scroll_speed = 10;
        $this = $(this);
        $(window).scroll(function() {
            $bgScroll = -(($win.scrollTop() - $this.offset().top)/ $scroll_speed);
            $bgPosition = 'center '+ $bgScroll + 'px';
            $this.css({ backgroundPosition: $bgPosition });
        });
});

似乎工作正常，只是我无法提高滚动速度，即使我更改了任何人都可以帮助我的变量？

Answer 1

通过更改因子可以轻松调整滚动速度。 5 倍的滚动速度更快，而 20 倍的滚动速度更慢。

$('div.parallax').each(function() {
  $scroll_speed = 5;
  $this = $(this);
  $('#container').scroll(function() {
    $bgScroll = -(($('#container').scrollTop() - $this.offset().top) / $scroll_speed);
    $bgPosition = 'center ' + $bgScroll + 'px';
    $this.css({
      backgroundPosition: $bgPosition
    });
  });
});

.parallax {
  height: 400px !important;
  width: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-position: center 0;
  font-weight: bold;
  font-size: 20px;
  color: red;
}
#container {
  height: 100px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="parallax" style="background-image: url('http://imgs.xkcd.com/comics/jack_and_jill.png'); ">
    bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>bla bla bla
    <br>
  </div>
</div>