Question

I have a problem with jQuery parallax effect for my body’s background. Here is the code:

jQuery(document).ready(function($){
    window.onscroll = function() {
        var bh = $(document.body).height();
        var wh = $(window).height();
        var st = $(window).scrollTop();
        var p = wh / bh;
        var pp = (st * p);
        $('body').css({backgroundPosition: '50% -'+pp+'px'});
    }

});

This code is great but after I have added I header with logo and nav menu they closed some part of background so not looks good enought now. Here is the link also http://layot.prestatrend.com/ The height of my header is 129px by the way. Seems I need to make background-position +129px but can’t figured out how to make it work properly with javascript. Any help please?

Answer 1

just add here:

var topPosition = pp + 129;
$('body').css({backgroundPosition: '50% -'+topPosition +'px'});

(or)

 $('body').css({backgroundPosition: '50% -'+ (pp + 129) +'px'}); // the parentesis avoid concatenation also

this way you’ll properly add the offset you want. don’t do it inside the string concatenation because the browser might append ==> wich would cause something like: for pp=99 ==> pp+129 = '99129'.