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