4

I'm working on a website:

http://beta.projektopia.se/

the body has several background-images that are updated on scroll like this:

$(document).ready(function(){

    $(document).scroll(function(){
        var scrollfactor=$("body").scrollTop()*0.2;
        var centerscrollpos =scrollfactor+613;
        var docheight = $(document).height();
        var windowheight = $(window).height();
        var bottompos = (docheight-980)-((docheight-windowheight)*0.2)+scrollfactor;
        var scrollpos = 'center '+scrollfactor+'px,center '+bottompos+'px, center '+ centerscrollpos+'px,center 0px';
        $("body").css("background-position", scrollpos);
    });
});

Lots of calculations, but the important thing is that a scrollpos is created that should change the position of the background when you scroll, to create a parallax-effect. It works great in chrome, but in firefox, the variable scrollfactor, that is suppose to get the current scroll-position, doesn't update.

ps, some people have this issue due to lack of correct doctype. I believe i have declared it correctly like this:

<!DOCTYPE html>
4

2 に答える 2

1

scrollTopjQueryメソッドには問題があることが知られています。

ブラウザによっては、またはを使用する必要がある場合が$('html, body').scrollTop()あり$(document).scrollTop()ます$(window).scrollTop()。

于 2012-11-04T15:06:49.507 に答える
1

私にとって、問題は要素のあらゆる種類のoverflowプロパティhtmlでした。取り外した瞬間、正常に.scrollTop()動作し始めました。ページにグローバルoverflow-x: hiddenプロパティが必要だったので、body要素に設定しました。

于 2019-04-10T08:11:23.550 に答える