Плавающее меню в PrototypeJS

Может кто-то, пожалуйста, помогите мне сделать плавающее меню в прототипе JS? Я нашел документацию, чтобы сделать это в jQuery, например здесь: net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ и здесь: manos.malihu .gr/jquery-floating-menu, но не может понять, с чего начать для prototypeJS.Плавающее меню в PrototypeJS

Итак, у меня это получилось, сортировка. Я нашел documentation here. Вот мой код:

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

Так что теперь я пытаюсь получить его, так что это не рывками, когда вы крутите, и поэтому в меню не начинает двигаться, пока свиток не съехал нравится 100px по вертикали или что-то, так это крючки на место.

источник

2010-09-18 Aaron

Если вы хотите, чтобы это выглядело нестабильным, вам придется использовать анимационную библиотеку. Если вы используете Prototype, то лучше всего посмотреть на Scriptaculous на http://script.aculo.us/

Я бы также рекомендовал использовать Element.cumulativeOffset для загрузки DOM, чтобы получить абсолютное верхнее смещение меню. Затем каждый раз, когда вы прокручиваете элемент меню, включайте это начальное заполнение, чтобы меню не просто защелкнулось в верхней части окна просмотра.

Еще одна идея, если вы не особенно хотите использовать библиотеку анимации, вы можете попытаться сделать положение меню: исправлено. Вам все равно придется постоянно обновлять позицию для IE, так как он не поддерживает фиксированное позиционирование ...

источник

2010-09-18 23:53:00

Огромное спасибо! Должен ли я использовать Effect.ScrollTo для анимации? – Aaron

Effect.ScrollTo только прокручивает сам видовой экран, он не анимирует положение элемента. Посмотрите в Effect.Move (http://wiki.github.com/madrobby/scriptaculous/effect-move). –

Подумайте, с какой помощью. Использовал этот урок: http://jqueryfordesigners.com/fixed-floating-elements/

Но изменил его, чтобы использовать синтаксис Prototype JS. Вот код:

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

источник

2010-09-21 14:53:07 Aaron

спасибо за предоставление вашего прототипа конверсии :) – dube

Я не совсем понимаю, что делает 'if (false)'. Могли бы вы объяснить? – TerranRich

Плавающее меню в PrototypeJS

ответ

Смежные вопросы