2

最初は単純な関数に見えたのに、今は髪を引っ張っていますが、誰か助けてくれませんか?

ウィンドウスクロール機能にバインドされている非常に単純なjQueryのチャンクを使用しています。これを機能させるために必要なすべての変数があると思いますが、そうではないようです。私の数学が不足しているようです。

評判ゼロで画像貼れなくてすみません！私が持っている変数は、ブラウザウィンドウ（x）、スクロールする背景画像を持つdivの高さ（y）、背景画像の高さ（z）、divの上部から上部までのスクロール位置です。ブラウザ ウィンドウ (o)。

div の背景位置は、ウィンドウ内の div の位置に対して相対的に移動する必要があります。これにより、ブラウザー ウィンドウの上から下 (およびその逆) にスクロールする div から画像全体が表示されます。

私の計算は次のとおりです:-

x+y gives me the whole range of movement the div will require to cover 
from it first being visible to it finally leaving the screen.

z-y gives me the range of movement the background image will require to 
cover for the whole image to scroll through the div as the div scrolls
through the browser window.

(z-y)/(x+y) gives me the number of pixels the background image has to 
move for every 1 pixel the browser window will scroll.

As an example,
x = 200
y = 50
z = 150
o starts at -50 and ends at 200

x+y = 250 (full div movement)
z-y = 100 (bg image movement)
(z-y)/(x+y) = 0.4 bg movement per pixel scrolled

したがって、div 位置が -50 から 200 までスクロールされると、bg 画像は 0 から -100 までスクロールする必要があります。

これらの最後のスレッドを結び付ける方法について途方に暮れています。これらの数値を関連付けるのを手伝ってくれる人はいますか?

事前に感謝します。ばかげて聞こえる場合は申し訳ありません。

マーク

Vincent と Rob の助けに感謝します。これは、任意のサイズの領域に対して data-type="background" を使用して必要な視差スクロールで機能するはずです。速度は、ブラウザの高さと背景画像のサイズによって決まります。みんなありがとう。

$(function(){
        $(window).bind('scroll', function() {
            $window = $(window);
           $('section[data-type="background"]').each(function(){
            var $bgobj = $(this);
            var windowHeight = 0;
                windowHeight = document.body.clientHeight;
            var img = new Image;
                img.src = $(this).css('background-image').replace(/url\(|\)$/ig, "");
            var bgImgHeight = parseInt(img.height);
            var divHeight = parseInt($(this).css('height'));
            var scrollPos = $(this).position().top - $window.scrollTop();
                var bgMovement = bgImgHeight - divHeight;
                var scrollMovement = windowHeight + divHeight;
                var intPos = scrollPos + divHeight;
                var yPos = ((bgMovement) / (scrollMovement)) * intPos;
                var coords = '50% '+ (-yPos) + 'px';
                $bgobj.css({ backgroundPosition: coords });
            });
        });
    });
4

1 に答える 1

1

imgWindow を使用して、画像を含む div を使用すると、次のようなもので問題ありません。

// get the maximum window scroll   
var deseapearPos =  $(window).height() - $('#imgWindow').offset().top;
var imgWindowHeight=('#imgWindow').height();
var imageHeight = 500;

$(window).scroll(function() {
    var currWinPos = $(window).scrollTop();
    if (currWinPos < deseapearPos ) {  
         // if imageWindow still on sight
         var newPos = /* your computation here */
 // ( smthg like newPos = ( imageHeight - imgWindowHeight ) * (currWinPos/ deseapearPos ) );
           $('#imgWindow').scrollTop(newPos);
     }
 });

( imgWindow css スタイルにオーバーフローがあります: scroll )

于 2013-06-10T23:16:11.300 に答える