background-image with parallax

Question

So i need a section of a website to have parallax with a background image. The problem is that the code calculate the parallax from the beginning of the website (it is a long scroll-down type website) and when i reach the mentioned section, the background is already too far up. Would need some kind of "delay" in the code so the parallax begin after a X-number of pixel scrolled? here the code:

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

Can you not do something like this?

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

Answer 2

不要使用“ background-size：cover” css属性，并且要注意一件事，即背景图像应大于每个视口的大小，最后滚动速度应采用降序方式，这意味着第一张幻灯片应具有更多滚动速度高于第二张幻灯片。

Answer 3

You could do the parallax effect just when the element is shown on the screen:

if (($(window).scrollTop() + $(window).height()) > elementPositionTop) {
   //
}

I think that would be enough.