0

スクロールすると、スライダーの画像がページとともにゆっくりとスクロールされるという効果を作成しようとしています。これは視差に似ており、良いデモは次のサイトです: http://escapeflight.com/

ページを下にスクロールすると、私が話している効果を見ることができます。

私のアプリケーションは似ていますが、固定されていないヘッダーがあります。以下のコード:

header = $('header').height();

function setTopSlider(){
    offset = window.pageYOffset;

    //if we have scrolled down past the height of the header, we want to begin the 'parallax' effect
    if(iScroll > header){
        $('.slides').css('top',(offset/3))
    }else{
        $('.slides').css('top',0);
    };
};

$(window).scroll(function () {
    setTopSlider();
});

これは機能しますが、ヘッダーの高さを超えてスクロールすると、.slidesジャンプの css 値が計算された値まで下がります。スライダーの一番上に到達したときにジャンプしないように、この計算の助けが必要offset/3です。スクロールダウンを開始するだけですが、ページの残りの部分とは異なる速度です

繰り返しますが、スライダーをページの残りの部分よりも遅い速度でスクロールする必要があるため、上記の手法を使用して、現在のpageYOffset. 何か案は？

4

1 に答える 1

0

これは、マークアップの設定方法によって異なります。あなたが示したサイトでは、絶対配置の div があり、上部の値が調整されています。同様のhtml/css構造で同じことをしていると思います。その場合は、次を試してください。

$('.slides').css('top' , ((offset - header)/3 ));

速度を微調整するのに適していると思われる "/3" を調整します。

于 2013-05-17T14:43:35.873 に答える