jquery - 条件に応じてDivを表示する

Question

ユーザーがページの最後までスクロールしたときに div を表示するページを見てきました。ユーザーが上にスクロールし始めると、div が消えます。jQueryでこれを行うにはどうすればよいですか。v1.8を使用しています

これまでのところ、私はこれを試しました

if($(window).scrollTop() + $(window).height() == $(document).height()) {
       alert('bottom')
}

Answer 1

スクロール時に確認する必要があります。

var $win = $(window),
    $doc = $(document),
    $target = $('#target');
// save relevant elements so they don't have to be selected on each scroll call

$win.scroll(function() {
    $win.scrollTop() + $win.height() == $doc.height()
    ? $target.show()
    : $target.hide();
});

jsfiddle

Answer 2

例: http://jsfiddle.net/7EzUf/

.scroll要素のハンドラーにコードを配置しますwindow。この関数は、ユーザーがスクロールするたびに起動されます。

$(window).scroll(function(){
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
        $('#bottom').fadeIn();
    } else {
        $('#bottom').fadeOut();
    }
});

Answer 3

ここで動作することを確認してください

一番下にヒットするとアラートdivが表示され、それ以外の場合は非表示になります