Плавающее меню в PrototypeJS - PullRequest
Новая
       18

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

4 голосов
/ 19 сентября 2010

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

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

<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 по вертикали или около того, так что она зацепляется на месте.

Ответы [ 2 ]

2 голосов
/ 21 сентября 2010

Разобрался с некоторой помощью. Использовал этот урок: 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' });   
            }           
        }
    });
0 голосов
/ 19 сентября 2010

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

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

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

...