Montrer et cacher une DIV à l'intérieur d'un conteneur

Question

Donc, sur ma page, j'ai un div que j'ai appelé un div "pagination-menu" dans un conteneur div que j'appellerais "news". Je veux que le pagination-menu div s'affiche seulement quand je défile dans le div de nouvelles et disparaisse si je fais défiler n'importe quel autre conteneur div.

Voici le code que j'ai jusqu'à présent:

$(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

Comment puis-je garder la pagination liée que par défilement à travers les nouvelles div? Pour le moment, son ensemble de sorte que le div pagination-menu ne s'affiche pas jusqu'à ce que j'arrive à la div nouvelles via le défilement, mais il reste même après avoir passé les limites inférieures de la div nouvelles.

Merci, j'apprécierais toute aide apportée.

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(); 
     } 
    });