0

インデックスページを特定のアンカータグにスクロールして背景画像を変更する機能があります。私が今抱えている問題は、メニューページのリンクを使用して、インデックスページのアンカーに移動し、その背景画像を変更する必要があることです。メニューページがインデックスページの上部に表示されます。

インデックスページ内をスクロールするために持っているJavascriptは次のとおりです。

    $('-Button-to-scroll-is-clicked').click(function () {
        clearInterval(ID);
        $('html, body').animate({
            scrollTop: $('-Anchor').position().top
        },
        3000);
        var IntID = setInterval(changeImg, 1500);
        function changeImgHome() {
            $('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
        };
        ID = IntID;
        return false;
    });

メニューページからインデックスページをスクロールするために持っているJavascriptは次のとおりです。

     $('-Button-In-Menu-Page').click(function () {
         $('html, body').animate({
             scrollTop: $('-Anchor-In-Index-Page').position().top
         },
         3000);
         return false;
     });

すでに述べたように、背景画像を適切に変更できるように、（window.scroll関数を使用して）スクロールした後の位置をインデックスページで確認する必要があります。

4

2 に答える 2

1

さて、まず、positionは要素の位置を収集します。デフォルトでは、要素はインラインに配置され、静的な位置にあり、位置調整はありません。したがって、.position（）。topを使用すると、これらすべてを完全に配置しない限り、ページ位置を生成できません。

.offsetがあるので、それは問題ではありません。オフセットは、ドキュメントに対するターゲットのx位置とy位置を示しているので、それを使用します。

これで、関数は次のようになります。

window.onready = function(){
    $(-Button-to-scroll).on('click',function(){
       var itemPos = $('target').offset().top;
       $('body,html').animate({scrollTop:itemPos},3000);
       $('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
    }
}

編集：あなたのスクロールのために。これは、基本的にユーザーがスクロールするたびに背景画像を書き換え続けるため、最も効率的な方法ではありません。

$('html').on('scroll',function(){
    var top = $(this).offset().top
    if ((top >= 200)||(top <= 300)){
        $('.imagemhome').css('background', 'url(-New-Image.jpg) top center no-repeat fixed');
    }
});
于 2013-01-29T18:24:26.037 に答える
0

ページ上の現在の位置は、で取得できます$(window).scrollTop()。

于 2013-01-29T18:14:58.520 に答える