jQuery scrollTop 和视差效果：在最底部滚动时浏览器窗口抖动

Question

我有一个创建视差效果的小脚本。因此，我创建了一个具有速度速度和数据类型的数据属性来选择视差元素。同时，其中一个元素在向下滚动时淡出。

脚本运行良好，但不幸的是，当滚动到站点底部（并“过度滚动”它）时，站点会像地狱一样抖动。这似乎是 yPos 和 scrollTop 方法的一部分。

你有什么想法吗？

这是标记：

<section class="slider">
  <img src="images/hafen.jpg" class="slide" data-type="parallax" data-speed="3">
  <div class="claim"  data-type="parallax" data-speed="6">
    <h1>SOME TEXT</h1>
  </div>
  <div class="arrow-down" data-type="parallax" data-speed="3">
    <img src="images/arrow-down.png" alt="">
  </div>
</section>
<section class="content"  data-type="parallax" data-speed="1">
  <div class="wrapper">
    <img src="images/content.png" alt="">
  </div>
<section>

这是我的脚本：

$(window).scroll(function() {
  var box;
  $("[data-type=\"parallax\"]").each(function() {
    var $bgobj, position, yPos;
    $bgobj = $(this);
    yPos = -($window.scrollTop() / $bgobj.data("speed"));
    position = parseInt(yPos);
    return $bgobj.css({
      marginTop: position
    });
  });
  box = $(".claim");
  return box.css({
    "opacity": 1 - $window.scrollTop() / 400
  });
});

Answer 1

您似乎在window 附近缺少( 和)：

yPos = -($window.scrollTop() / $bgobj.data("speed"));

应该是：

yPos = -($(window).scrollTop() / $bgobj.data("speed"));

你<section> 并没有在最后关闭。应该是：

...
</section>

不确定使用适当的 CSS 后您的预期结果应该是什么样的，但这似乎与上述更改一起使用：

http://jsfiddle.net/4Zmh8/

$(function () {
    $(window).scroll(function () {
        var box;
        $("[data-type=\"parallax\"]").each(function () {
            var $bgobj, position, yPos;
            $bgobj = $(this);
            yPos = -($(window).scrollTop() / $bgobj.data("speed"));
            position = parseInt(yPos);
            return $bgobj.css({
                marginTop: position
            });
        });
        box = $(".claim");
        return box.css({
            "opacity": 1 - $window.scrollTop() / 400
        });
    });
});