上記の特定のdivの場合にのみ呼び出す関数

Question

divの範囲が外にスクロールされるとウィンドウの下部に「固定」されます。ユーザーがページの上半分を表示しているときだけ、この動作が必要です。ユーザーがページの下部にいるときに、fixed状態がdivに適用されないようにします。

短く - 問題は、ページ位置に関係なく、divが表示範囲外のときにfixed状態が適用されていることです。

デモhttps://jsfiddle.net/DTcHh/19352/

$(window).scroll(function() { 
    if (isScrolledIntoView($('#myDivWrapper'))) { 
    if (!initSet) { 
     initSet = true; 
    } 
    $("#myDiv").removeClass('fixed'); 
    } else if (initSet) { 
    $("#myDiv").addClass('fixed'); 
    } 
}); 

function isScrolledIntoView(elem) { 
    var $elem = $(elem); 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

Answer 1

この方法では、あなたのマークアップとあなたのisScrolledIntoView機能の編集が含まれます。

divには、#topのIDを付けて、マークアップの上半分（または呼び出すことのできる表示可能な領域）を囲みます。

スクロールマークアップを変更すると、現在、すべての要素が表示されていることがチェックされているため、部分的なチェックのみが必要です。

デモhttps://jsfiddle.net/DTcHh/19366/

$(window).scroll(function() { 
    if(isScrolledIntoView($('#myDivWrapper'))) { 
     if (!initSet) { 
     initSet = true; 
     } 
     $("#myDiv").removeClass('fixed'); 
    } else if (initSet && isScrolledIntoView($('#top'))) { 
     $("#myDiv").addClass('fixed'); 
    } 
}); 

function isScrolledIntoView(elem) { 
    var $elem = $(elem); 
    var $window = $(window); 

    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop)) ; 
} 

私はそれが二番目のパラメータ/ ELEを受け入れるようisScrolledIntoView機能を変更することをお勧め。あなたはこれを一度呼び出すだけです。

Answer 2

このページの下半分にある場合、ブロックにのみ実行された場合に

if($(window).scrollTop() + $(window).height()/2 > $(document).height()/2) 

更新フィドル - https://jsfiddle.net/DTcHh/19370/