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>并未在最后关闭。应该是：

$(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
        });
    });
});

使用正确的CSS不确定您的预期结果应该是什么样的，但这似乎与上述更改有关：

http://jsfiddle.net/4Zmh8/

{{1}}

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

1 个答案: