在滚动条上设置相对位置背景y元素

Question

jQuery(function ($) {       

    $(window).scroll(function() { 
        var y = $(this).scrollTop();

        if (y > 360) {
            var pos_yvalue = y - 294;
            $('.site-header .wrap').css('background-position-y',
            pos_yvalue.toString() + 'px');
        }
    });
});

With above I want to set an image in the wrap-header ( .site-header .wrap ) to a background-position-y relative to the y-position of the scroll.

So when I scroll above 360px then I want to position the background-image of site-header .wrap to be 66 and when it is 362 the background-image of the wrap should be 65 etc.

Above code would represent the values 66, 67, 68 etc instead of counting downwards like this: 66, 65, 64, 63,62,61 etc..

For some reason I can't get my head around this one.

Answer 1

I noticed some syntax errors that may be part of your problem if you're not linting your code or have an IDE that lets you know.

As is, your code should look like:

jQuery(function ($) {       

    $(window).scroll(function() { 
        var y = $(this).scrollTop();

        if (y > 360) {
            var pos_yvalue = y - 294;
            $('.site-header .wrap').css('background-position-y',
        pos_yvalue.toString() + 'px');
        }
    });
});

You're missing some closing )'s. Otherwise the code appears to add the background position to the .site-header element. Are you going for a fixed header that sticks to the top of the page?

Answer 2

It was actually just a matter of calculation:

if (y > 360) {
    var minus_y = ( y - 295 ) - 66;   
    var pos_yvalue = 66 - minus_y;
    $('.site-header .wrap').css('background-position-y', pos_yvalue.toString() + 'px');
}