ウィンドウ内に別のdivが表示されているときに要素を非表示にする

Question

#pre-footerまたは#footer divがウィンドウに表示されている場合、クラス.hiddenをスティッキメニューに切り替える必要があります。

私はjqueryとscrollTop();を使いこなしていますが、それを実現するようには見えません。だから、基本的には、ビューポートの底は#pre-footerの底部と整列されたときに、クラスを切り替えたいhttps://jsfiddle.net/gavinfriel/4tcjnoxp/5/

Answer 1

：すべてのヘルプは、これまで

$(document).ready(function() { 
    var $window = $(window); 
    var tabwrap = $('.tab-wrap'); 
    var prefooter = $('#pre-footer'); 
    $window.on('scroll', function() { 
    var scrollTop = $window.scrollTop(); 
    tabwrap.toggleClass('hidden', scrollTop > 300); /* Help! */ 
    /* .tabwrap should toggle class .hidden when #pre-footer and or #footer is visible in window */ 
    }); 
}); 

フィドルをいただければ幸いです。だから、ときscrollTop値+ビューポートの高さが#pre-footer

$(document).ready(function() { 
    var $window = $(window); 
    var tabwrap = $('.tab-wrap'); 
    var prefooter = $('#pre-footer'); 
    var prefooter_top = prefooter.offset().top; 
    var prefooter_height = prefooter.height(); 
    var prefooter_bottom = prefooter_top + prefooter_height; 
    console.log(prefooter_bottom); 
    $window.on('scroll', function() { 
    var scrollTop = $window.scrollTop(); 
    var viewport_height = $(window).height(); 
    var scrollTop_bottom = scrollTop + viewport_height; 
    tabwrap.toggleClass('hidden', scrollTop_bottom > prefooter_bottom); 
    }); 
}); 

Answer 2

var tabwrap = $('.tab-wrap'); 
var prefooter = $('#pre-footer'); 

/** 
* @desc Check to see if element is inside the viewport 
*/ 
$.fn.isInViewport = function() { 
    var element  = $(this), 
     elementHt = element.outerHeight(), 
     elementTop = element.offset().top, 
     elementBot = elementTop + elementHt, 

     viewportTop = $(window).scrollTop(), 
     viewportBot = viewportTop + $(window).outerHeight(), 

     offset  = 0.35 * elementHt; // pecentage of top and bottom 

    return (elementBot - offset) > viewportTop && (elementTop + offset) < viewportBot; 
}; 


function checkOffset() 
{ 
    if(prefooter.isInViewport()) 
     tabwrap.addClass('hidden'); 
    else 
     tabwrap.removeClass('hidden'); 
} 

$(window) 
.load(function(){ checkOffset(); }) 
.scroll(function(){ checkOffset(); });