0
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.

bestprogrammerintheworld
  • 5,417
  • 7
  • 43
  • 72
  • 1
    Have you tried using `var screenTop = $(document).scrollTop(); $('#content').css('top', screenTop);` see 2nd answer here -- http://stackoverflow.com/questions/7019353/jquery-how-to-get-the-pages-current-screen-top-position. Also are you using this for mobile? Might need to add library for mobile events. Also see this post on scrolling values (you'll need to change `bind` to `on` for jquery >1.9 -- https://stanhub.com/how-to-get-element-distance-from-top-jquery-offset/ – Rob Scott Mar 06 '17 at 22:36
  • Of course mobile has to be taken into consideration, but not for the moment being. – bestprogrammerintheworld Mar 06 '17 at 22:45

2 Answers2

0

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?

JDev518
  • 772
  • 7
  • 16
0

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');
}
bestprogrammerintheworld
  • 5,417
  • 7
  • 43
  • 72