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

对于顶部图片 - 将滚动顶部更改为scrolltop = $(window).scrollTop() + -1000数字越大，启动px也越大。

每个其他图像都需要重复名为scrolltop2的scrolltop2，它不包含数字。这在scrollwindow中引用。

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

然后将数字添加到backgroundscroll，例如backgroundscroll = scrollwindow - sectionthreeoffset + -1500;

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

1 个答案: