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