在容器中显示和隐藏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(); 
     } 
    });