Comment faire pour faire défiler un élément avec la page, mais le confiner à son parent DIV?

J'utilise la méthode décrite ici: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/Comment faire pour faire défiler un élément avec la page, mais le confiner à son parent DIV?

Dans un premier temps, je peux tout faire fonctionner (jquery chargé en cours CDN), mais lorsque vous faites défiler vers le bas de la page l'élément de la barre latérale porte sur le défilement vers le bas, ce qui rend la page plus , qu'il fait ensuite redescendre en créant un parchemin infini.

Je souhaite limiter la barre latérale à l'intérieur de l'élément parent - dans ce cas, le conteneur principal. Lorsque l'élément atteint le fond de cette div, je veux qu'il arrête de défiler. J'ai essayé de manipuler la réponse ici: Jquery Scrolling div - Prevent from entering site footer mais avec peu de succès. Des indices?

#HTML Structure 

<!DOCTYPE html> 
<html> 
<body> 
    <div id="container">  
     <div id="content-container"> 
      <script> 
       $().ready(function() {  
        var $scrollingDiv = $("#sidebar"); 

        $(window).scroll(function(){    
         var y = $(this).scrollTop(), 
          maxY = $('#secondary-container').offset().top, 
          scrollHeight = $scrollingDiv.height(), 
          offset = 30; 

         if(y< maxY-scrollHeight-offset){ 
          $scrollingDiv 
          .stop() 
          .animate({"marginTop": ($(window).scrollTop()+offset) + "px"}, "slow");   
         }  
        }); 
       }); 
      </script> 

      <h1>header</h1> 
      <div id="intro-text"> 
       <h3>Sub header</h3> 
       <p> 
        Blah blah blah 
       </p> 
      </div> 
      <div id="main-container"> 
       <div id="main"> 
<!-- Repeat x times --> 
        <div class="listing"> 
         <p class="listing-description"> 
          Blah 
         </p> 
         <p class="listing-response"> 
          Blah 
         </p> 
         <br /> 
         <a href="#">Linky</a> 
        </div> 
<!-- End repeat --> 
       </div> 
       <div id="sidebar"> 
        <h3>Floaty box content</h3> 
        Blah 
       </div> 
      </div> 
      <div id="secondary-container"> 
       <div id="secondary-left"> 
       </div> 
       <div id="secondary-right"> 
       </div> 
      </div> 
      <div id="footer"> 
      </div> 
     </div> 
    </div> 
</body> 
</html> 


# CSS 


#container { 
    padding:10px; 
    margin:10px; 
    margin:auto; 
    width:1000px; 
    overflow:auto; 
} 


.listing { 
    margin-bottom:5px; 
    position:relative; 
    clear:both; 
    overflow:auto; 
    width:800px; 
} 

.listing-description { 
    float:left; 
    width: 49%; 
    font-weight:bold; 
} 

.listing-response { 
    float:left; 
    width:50%; 
    padding-left:5px; 
} 

#main-container { 
    clear:both; 
    overflow:auto; 
} 

#main { 
    float:left; 
} 

#sidebar { 
    float:left; 
    padding-left:10px; 
} 

#secondary-container { 
    clear:both; 
    overflow:auto; 
    border: 1px solid; 
} 

#secondary-left { 
    width:50%; 
    float:left; 
} 

#secondary-right { 
    width:50%; 
    float:left; 
}

Source

2011-10-06 FiveOhOne

Pouvez-vous illustrer le problème de ce violon? http://jsfiddle.net/MWzCS/1/ –

http://jsfiddle.net/MWzCS/2/ - Cela illustre le problème, mais vous devez faire en sorte que la hauteur de la boîte de résultats soit assez petite (100-150px) obtenir le défilement pour déclencher réellement. Je pourrais probablement le remplir avec plus de remplissage, mais je l'ai déjà perdu 3 fois en raison de l'action de retour/défilement à deux doigts de safari ... :( – FiveOhOne

J'ai fini avec ceci:

$(window).scroll(function(){    
    var y = $(this).scrollTop(), 
    maxY = ($('#secondary-container').offset().top - $('#sidebar').height() - 110), 
    scrollHeight = $scrollingDiv.height(); 

    if(y< maxY-scrollHeight){ 
    $scrollingDiv 
    .stop() 
    .animate({"marginTop": $(window).scrollTop() + "px"}, "slow");   
    }  
});

la Soustraction hight #sidebar de la variable maxY, plus la magie numéro 110. Je ne suis pas à 100% d'où vient le nombre magique, mais après avoir joué avec, cela correspond à mes besoins. Votre kilométrage peut varier.

Source

2011-10-07 08:28:37 FiveOhOne

Comment faire pour faire défiler un élément avec la page, mais le confiner à son parent DIV?

Répondre

Questions connexes