Parallax - help making vertical position start at 200px rather than 0px

Question

I'm using a precoded Parallax JQuery as part of a Wordpress theme called Parallax by Studiopress. It works fairly well, but I end up missing the top half of the image when scrolling and I'd like the user to be able to see that as well when they scroll down. Currently, the background-position starts at "50% 0px" and the px goes into negative figures when you scroll the page. I figure if I set it to start at 200 or 300px the majority of the image can be viewed. However, I can't set the CSS as that gets overridden by JQuery.

I'm fairly new to JQuery so I'm wondering if there's any pointers or method that can be given to help me?

This is the code :

jQuery(function ($) {

    // Enable parallax and fade effects on homepage sections
    $(window).scroll(function () {

        scrolltop = $(window).scrollTop()
        scrollwindow = scrolltop + $(window).height();

        $(".home-section-2").css("backgroundPosition", "50% " + -(scrolltop / 6) + "px");

        if ($(".home-section-4").length) {

            sectionthreeoffset = $(".home-section-4").offset().top;

            if (scrollwindow > sectionthreeoffset) {

                // Enable parallax effect
                backgroundscroll = scrollwindow - sectionthreeoffset;
                $(".home-section-4").css("backgroundPosition", "50% " + -(backgroundscroll / 6) + "px");

            }

        }
    })
});

Answer 1

For the top image - change scrolltop to scrolltop = $(window).scrollTop() + -1000 The larger the number makes the starting px larger as well.

Every other image requires a duplicate of scrolltop called scrolltop2 which does not contain the number. This is referred to in scrollwindow.

scrolltop2 = $(window).scrollTop()
scrollwindow = scrolltop2 + $(window).height();

Then add the number to backgroundscroll
eg: backgroundscroll = scrollwindow - sectionthreeoffset + -1500;