在容器中顯示和隱藏DIV

Question

因此，在我的頁面上，我有一個div，稱爲「分頁菜單」div，我稱之爲「新聞」。我希望分頁菜單div僅在滾動瀏覽新聞div時顯示，如果滾動瀏覽其他任何容器div，就會消失。

這是我到目前爲止的代碼：

$(window).scroll(function(){ 
 
     var elementoffset = $('#news').offset(); // <<< change #elementhere with your element you want the scroll to make action when reach it       
 
     if ($(this).scrollTop() > elementoffset.top - 75) { 
 
      $('.pagination-menu').fadeIn(150); 
 
      $('.pagination-menu').addClass('displaybox'); 
 

 
     } 
 
     else { 
 
      $('.pagination-menu').fadeOut(150); 
 
      $('.pagination-menu').removeClass('displaybox'); 
 
     } 
 
     
 
    }); // EOF scroll

如何保持只有通過通過新聞DIV滾動綁定的分頁？目前，它的設置使分頁菜單div不會顯示，直到我通過滾動才能看到新聞分區，但即使在通過新聞分區的底部界限後它仍然保留。

謝謝，我會很感激任何幫助。

Answer 1

var newsEle = $('#news'), 
    pageEle = $('.pagination-menu'), 
    newsEleOffset,newsEleBottom; 

    function fnFadeIn(){ 
     pageEle.fadeIn(150); 
     pageEle.addClass('displaybox'); 
    } 
    function fnFadeOut(){ 
     pageEle.fadeOut(150); 
     pageEle.removeClass('displaybox'); 
    } 
    $(window).scroll(function() { 
     newsEleOffset = newsEle.offset(); 
     newsEleBottom = newsEleOffset.top + newsEle.height(); 
     if ($(this).scrollTop() > newsEleOffset.top - 75) { 
      if ($(this).scrollTop() > newsEleBottom) { 
       fnFadeOut(); 
      } else { 
       fnFadeIn(); 
      } 
     } 
     else { 
      fnFadeOut(); 
     } 
    });