background-image with parallax

Question

Так что мне нужен раздел веб-сайта, чтобы иметь параллакс с фоновым изображением. Проблема в том, что код вычисляет параллакс с самого начала веб-сайта (это длинный веб-сайт с прокруткой вниз), и когда я дойду до упомянутого раздела, фон уже слишком далеко. Нужна ли какая-то «задержка» в коде, чтобы параллакс начинался после прокрутки X-номера пикселя? вот код:

Jquery:

$(document).ready(function() { 
    // Cache the Window object 
    $window = $(window); 

    $('section[data-type="background"]').each(function() { 
     var $bgobj = $(this); // assigning the object 

     $(window).scroll(function() { 

      // Scroll the background at var speed 
      // the yPos is a negative value because we're scrolling it UP!        
      var yPos = -($window.scrollTop()/$bgobj.data('speed')); 

      // Put together our final background position 
      var coords = '50% ' + yPos + 'px'; 

      // Move the background 
      $bgobj.css({ 
       backgroundPosition: coords 
      }); 
     }); // window scroll Ends 
    }); 
}); 

HTML:

<section id="background" data-type="background" data-speed="5"> 
    <div class="container"> 
     <div class="shadow-block"><img src="images/shadow-b.png" alt="" class="scale-with-grid"/></div> 
      <div class="quote two-thirds column" > 
      </div> 
      </div> 
</section> 

CSS:

#background { 
    background: url(../images/big-bg.jpg)no-repeat center center; 
    background-size:cover; 
    width: 100%; 
    height:500px; 
    padding: 40px 0; 
    overflow: hidden; 
    position: relative; 
} 

Answer 1

Вы можете не сделать что-то вроде этого?

var Top = $(document).scrollTop(); 
    if(Top < 200){ 
    //Then do the parallax stuff... 
} 

Answer 2

Не использовать «фон-размер: крышка» CSS свойство и заботиться об одном, что ваши фоновые изображения должны быть большим, чем размер каждого окна и, наконец, скорость прокрутки должна быть в порядке убывания моды, означает, что первый слайд должен иметь больше скорости прокрутки, чем второй слайд.

Answer 3

Вы можете сделать эффект параллакса только тогда, когда элемент отображается на экране: if (($ (window) .scrollTop() + $ (window) .height())> elementPositionTop) ... Я думаю этого было бы достаточно.