0

左側のコピーをスクロールし続けると、画像が画面に表示されたままになるスクリプトがあります。ページの残りのコンテンツに重ならないように、左側のコピーの最後に到達した後に画像の「固定」を停止するコードについて助けが必要です。

コードとページへのリンクは次のとおりです。

http://jsfiddle.net/TheeAndre/yQKEH/5/

$(function () {
    var blogphotos = $('#blogphotos').offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > blogphotos) {
            $('#blogphotos').addClass("sticky");
        } else {
            $('#blogphotos').removeClass("sticky");
        }
    });
});
4

1 に答える 1

0

CSS を追加します。

.two_third {
    position: initial;
}
.sticky.stop {
    position: absolute;
}

テーブルに ID を追加します (スクロールを停止するタイミングを JS に伝えるため):

<div class="one_full">
     <table width="800" border="0" cellspacing="0" cellpadding="0" id="stopScroll">

スクロール機能を変更します。

$(window).scroll(function () {
    var winScroll = $(window).scrollTop();
    var stopScroll = $('#stopScroll').offset().top - $('#blogphotos').height();
    $('#blogphotos').removeClass("sticky stop");

    if (winScroll > blogphotos) {
        $('#blogphotos').addClass("sticky");
    }
    else {
        $('#blogphotos').removeClass("sticky");
    }

    if (winScroll > stopScroll) {
        $('#blogphotos').addClass("stop").css('top', stopScroll);
    }
    else {
        $('#blogphotos').removeClass("stop").css('top', 0);
    }
});

http://jsfiddle.net/samliew/yQKEH/11

于 2013-09-01T14:20:05.240 に答える