Permuter la classe CSS sur la base de la position de défilement avec Javascript

Question

Je cherche à recréer la barre latérale du panier d'achat Apple Store.

http://store.apple.com/us/configure/MB535LL/A?mco=MTA4MTg3NTQ

Il est similaire à « position: fixed » sauf qu'il commence comme « position: absolute » avec la classe CSS « ​​pinned_top », puis passe à la classe CSS « ​​flottant » lorsqu'un certain scroll- La position y est atteinte.

J'ai regardé PARTOUT pour cela, il semble qu'un tutoriel devrait être évident mais je n'ai encore rien trouvé. De l'aide?

Answer 1

Vous devrez gérer l'événement window.onscroll, et vérifier la position de l'élément, si le scrollTop est supérieur à la position de votre élément, vous fixez l'élément fixé en haut, sinon, vous placez l'élément où il était à l'origine .

Un example utilisant jQuery:

$(function() { 
    var $el = $('.fixedElement'), 
     originalTop = $el.offset().top; // store original top position 

    $(window).scroll(function(e){ 
    if ($(this).scrollTop() > originalTop){ 
     $el.css({'position': 'fixed', 'top': '0px'}); 
    } else { 
     $el.css({'position': 'absolute', 'top': originalTop}); 
    } 
    }); 
}); 

Answer 2

Ce travail en FF3.5!

<div id="banner" style="border:1px solid blue;width:100%;height:100px;"> 
This is a banner1 
</div> 
<div style="clear:left;border:1px solid green;width:70%;height:900px;top:110;"> 
    this is main div 
</div> 
<div id="fixedDiv" 
      style="clear:left;position:absolute;top:110;right:20;width:25%; 
      border:1px solid red;height:500px;"> 
    lorem ipsum dorem dorel ipsa zeta zelga rumba lorem ipsum dorem dorel ipsa 
    zeta zelga rumba lorem ipsum dorem dorel ipsa zeta zelga rumba 
</div> 

<script type="text/javascript"> 
    var abs=false; //dont set it again and again 
$(document).ready(function(){ 
    $().scroll(function(e){ 
    var st=$(window).scrollTop(); 
    //110 is top of fixedDiv 
    if(st>110) 
    { 
       //set number to how much you want it from top! 
       $("#fixedDiv").css({"top":10}); 
       if(abs) return; 
       $("#fixedDiv").css({"position":"fixed"}); 
       abs=true; 
      } 
      else 
      { 
       if(!abs) return; 
       //if we are again showing banner, change position to absolute 
       $("#fixedDiv").css({"position":"absolute","top":110}); 
       abs=false; 
      } 
     }); 
    }); 
</script>