0

HTML5とjqueryv1.8.2を使用して、記事ページの最後に到達したときにアイテムをポップアウトするイベントをトリガーしています。それはうまく機能しますが、トリガー可能なID（#last）イベントを数値呼び出し（ピクセル/パーセンテージ）に置き換えることができるかどうかを確認しようとしています。

このコードは、記事ページで使用することを目的としています。記事の終わりに近づくと、モーダルがポップします。現在、モーダルをポップするように取得します。IDの高さ（#last）を検出し、IDが#lastの要素の高さに基づいてポップします。私がやろうとしているのは、IDを使用してイベントをトリガーする代わりに、数値を使用することだけです。たとえば、ページが上から66％スクロールすると、ポップアウトモーダルイベントが発生します。

コードは次のとおりです。

$(function() {
$(window).scroll(function(){
var distanceTop = $('#last').offset().top - $(window).height();
if  ($(window).scrollTop() > distanceTop)
$('#toolbar-btm-button').fadeIn('slow').animate({bottom: '0'},"slow");
else 
$('#toolbar-btm-button').animate({bottom: '-44px'},"fast");    
});
});

#lastをピクセルとパーセンテージの値に置き換えてみましたが、正しく機能していないようです。これは私が試したものですが、機能しませんでした。

$(function() {
$(window).scroll(function(){
var distanceTop = $('66%').offset().top - $(window).height();
if  ($(window).scrollTop() > distanceTop)
$('#toolbar-btm-button').fadeIn('slow').animate({bottom: '0'},"slow");
else 
$('#toolbar-btm-button').animate({bottom: '-44px'},"fast");    
});
});

何かアドバイス？

4

1 に答える 1

0

次のようなことを試してください：

$(function() {
    $(window).scroll(function() {
        var distanceTop = $('body').height() - $(window).height();
        if ($(window).scrollTop() > (distanceTop * 0.6)) {
            $('#toolbar-btm-button').fadeIn('slow').animate({
                bottom: '0'
            }, "slow");
        } else {
            $('#toolbar-btm-button').animate({
                bottom: '-44px'
            }, "fast");
        }
    });
});​
于 2012-10-15T17:21:53.223 に答える