JavaScript - 他の要素がビューポート内に完全にあるときに要素を非表示にする

Question

ビューポートに.indicationが完全に表示されているときに.isi-jumo-linkを非表示にしたい。現在は、指示がビューポートの一番上に来ると消えます。

ユーザーは上からスクロールする必要があり、指示が完全に表示されたら.isi-jump-linkは消えます。

$(window).on('scroll', function() { 
    if ($(this).scrollTop() >= $('.indication').offset().top) { 
     $('.isi-jump-link').hide();   
    } 
    else { 
     $('.isi-jump-link').show(); 
    } 
}); 

ただ、注意すべき...私の場合には、固定scrollTopスプライトを使用すると、動作しません。

Answer 1

トップの両方とあなたの適応症の底がビューポート内にあるかどうかをチェックできます。

$(window).on('scroll', function() { 
    var bottomIsVisible = $(this).scrollTop() + $(this).height() >= $('.indication').offset().top + $('.indication').height(); 
    var topIsVisible = var topIsVisible = $(this).scrollTop() <= $('.indication').offset().top; 
    if (bottomIsVisible && topIsVisible) { 
     $('.isi-jump-link').hide();   
    } 
    else { 
     $('.isi-jump-link').show(); 
    } 
}); 

Answer 2

あなたはまた、式に.indication<div>の高さを追加する必要があります。

$(window).on('scroll', function() { 
    if ($(this).scrollTop() >= ($('.indication').offset().top + $('.indication).height())) { 
    $('.isi-jump-link').hide();   
    } 
    else { 
    $('.isi-jump-link').show(); 
    } 
});