0

上マージンがアニメーション化された要素があります。境界線から近すぎないかどうかを検出する必要があります。近すぎない場合は、親divを下の位置にスクロールして、アニメーション要素が非表示にならないようにします。次に例を示します。

http://jsfiddle.net/zYYBR/5/

「下」ボタンをクリックした後、この緑色のボックスが赤い線の下に表示されないようにする必要があります。

4

2 に答える 2

1

これですか？

var new_margin;
var step = 75;
var limit = $("#max")[0].offsetTop;

$('#down').click(function() {
    var goStep = step;
    var elHeight = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;    
    if((elHeight + step) > limit)
    {
        goStep = limit - elHeight;
    }
    new_margin = goStep +  parseInt($('#animated').css('margin-top'));
    $("#animated").animate({marginTop: new_margin}, 1000);   
});

http://jsfiddle.net/zYYBR/8/

編集：またはそのようなものかもしれません（もちろん、現在はスクロールで非常にバグがあるため、計算を改善することができます）：

var new_margin;
        var step = 75;
        $('#down').click(function () {
            scroll(1000);
        });

        var scrollTimer = null;
        $("#container").bind("scroll", function () {
            clearTimeout(scrollTimer);
            scrollTimer = setTimeout(function () { scroll(1); }, 10);
        });

        function scroll(speed) {
            var scrollStep, animationStep = step;
            var currentBoxBottom = $("#animated")[0].offsetTop + $("#animated")[0].offsetHeight;
            var nextCurrentBoxBottom = currentBoxBottom + step;
            var limit = $("#max")[0].offsetTop + $("#container")[0].scrollTop;
            if (nextCurrentBoxBottom > limit) {
                if (limit >= $("#container")[0].scrollTop) {
                    scrollStep = $("#container")[0].scrollTop + nextCurrentBoxBottom - limit;
                }
                else {
                    scrollStep = $("#container")[0].scrollTop - nextCurrentBoxBottom - limit;
                    animationStep = nextCurrentBoxBottom - limit;
                }

                $("#container")[0].scrollTop = scrollStep;
            }

            new_margin = animationStep + parseInt($('#animated').css('margin-top'));
            $("#animated").animate({ marginTop: new_margin }, speed);
        }

http://jsfiddle.net/zYYBR/13/

于 2012-09-10T20:12:06.673 に答える
0

このようなことを意味しますか？

Alex Dn と同じ視覚的な結果が得られましたが、あなたが話していると思われることに少し方向性を追加しました。それがあなたが探しているものなら、私は更新を行います：

var new_margin; var ステップ = 75; var limit = $("#max")[0].offsetTop;

$('#down2').click(function() {
var anim = $("#animated");
var hrOff = $("#max").offset();
var thOff = anim.offset();
new_margin = Math.min(hrOff.top - thOff.top - anim.height(), 75);
console.log(new_margin, hrOff.top, thOff.top);
var st = 0;
if (new_margin < 75) {
    st = 75 - new_margin;
    //have container scroll by this much?
}

anim.animate({
    marginTop: "+=" + new_margin
}, 1000);
});​

</p>

http://jsfiddle.net/zYYBR/10/

于 2012-09-10T20:21:43.483 に答える