Menu flottant dans PrototypeJS

quelqu'un peut-il s'il vous plaît m'aider à faire un menu flottant dans prototypeJS? J'ai trouvé la documentation pour le faire dans jQuery, comme ici: net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ et ici: manos.malihu .gr/jquery-floating-menu, mais ne peut pas savoir par où commencer pour prototypeJS.Menu flottant dans PrototypeJS

Alors je l'ai eu du travail, sorta. J'ai trouvé documentation here. Voici mon code:

<html> 
<head> 
<title>Prototype examples</title> 
<script src="lib/prototype/prototype.js" type="text/javascript"></script> 

<script type="text/javascript">   

Event.observe(window,'scroll', function(evt){ 
    $('movable').setStyle({ top: 8 + document.viewport.getScrollOffsets().top + 'px' }); 
}); 

</script> 


<style type="text/css"> 

#container { 
background:#000; 
padding:100px 10px 10px; 
} 

#movable { 
    position: absolute; 
float:left; 
    width:18.5%; 
    height: 300px; 
    background-color: red; 
} 

#firstDiv { 
background:#ccc; 
float:right; 
height:1200px; 
width:80%; 
} 

.clear-both {clear:both;} 

</style> 

</head> 

<body> 

<div id="container"> 

    <div id="movable"> Floating menu</div> 



<div id="firstDiv">right</div> 

<div class="clear-both"></div> 

</div> 

</body> 
</html>

Alors maintenant, je suis en train de l'obtenir si ce n'est pas saccadé lorsque vous faites défiler, et donc le menu ne marche pas commencer à bouger jusqu'à ce que le défilement a été déplacée vers le bas pour que 100px verticalement ou quelque chose, il crochets en place.

Source

2010-09-18 Aaron

Si vous ne voulez pas avoir l'air agité, vous allez devoir utiliser une bibliothèque d'animation. Si vous utilisez Prototype, alors votre meilleur pari est de regarder dans Scriptaculous à http://script.aculo.us/

Je recommande également d'utiliser Element.cumulativeOffset sur la charge DOM pour obtenir le décalage supérieur absolu du menu. Ensuite, chaque fois que vous faites défiler l'élément de menu, incluez ce remplissage initial afin que le menu ne se verrouille pas en haut de la fenêtre. Une autre idée aussi, si vous ne voulez pas particulièrement utiliser une bibliothèque d'animation, vous pouvez essayer de faire la position du menu: fixe. Vous devrez cependant continuer à mettre à jour la position pour IE, car il ne supporte pas le positionnement fixe ...

Source

2010-09-18 23:53:00

super merci! devrais-je utiliser Effect.ScrollTo pour l'animation? – Aaron

Effect.ScrollTo ne fait défiler que la fenêtre elle-même, elle n'anime pas la position d'un élément. Regardez dans Effect.Move (http://wiki.github.com/madrobby/scriptaculous/effect-move). –

Vous l'avez trouvé avec de l'aide. Utilisé ce tutoriel: http://jqueryfordesigners.com/fixed-floating-elements/

Mais modifié pour utiliser la syntaxe Prototype JS. Voici le code:

var topMenu = $('ELEMENT').cumulativeOffset().top; 

Event.observe(window,'scroll', function(evt) { 

     // what the y position of the scroll is 
     var y = document.viewport.getScrollOffsets().top; 

     // console.log(y) // console 

     // check which browser it's using 
     if (false) { // newer browsers, could be "false" 
      if (y >= topMenu) { 
       // if so, ad the fixed class 
       $('ELEMENT').addClassName('fixed'); 
       } else { 
       // otherwise remove it 
       $('ELEMENT').removeClassName('fixed'); 
       } 
     } 
     else { // older browsers, iPad, iPhone 
      if (y >= topMenu) { 
       $('ELEMENT').setStyle({ top: (0 + document.viewport.getScrollOffsets().top - topMenu) + 'px' }); 
      } 
      else { 
       $('ELEMENT').setStyle({ top: 0 + 'px' }); 
      }   
     } 
    });

Source

2010-09-21 14:53:07 Aaron

merci de fournir votre conversion de prototype :) – dube

Je ne comprends pas ce que le 'if (false)' fait. Pourriez-vous expliquer? – TerranRich

Menu flottant dans PrototypeJS

Répondre

Questions connexes