PrototypeJS中的浮動菜單

有人可以幫我在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的起始位置。PrototypeJS中的浮動菜單

因此，我得到它的工作，sorta。我發現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/

我也建議在DOM負載上使用Element.cumulativeOffset來獲得菜單的絕對頂部偏移量。然後每次滾動菜單元素時，都要包含此初始填充，以便菜單不會鎖定到視口的頂部。

還有一個想法，如果你不特別想使用動畫庫，你可以嘗試使菜單位置：固定。儘管如此，你仍然必須不斷更新IE的位置，因爲它不支持固定位置...

來源

2010-09-18 23:53:00

真棒謝謝！我應該使用Effect.ScrollTo進行動畫嗎？ – Aaron 2010-09-19 16:06:19

Effect.ScrollTo僅滾動視口本身，它不會動畫元素的位置。看看Effect.Move（http://wiki.github.com/madrobby/scriptaculous/effect-move）。 – 2010-09-20 01:02:41

找出了一些幫助。使用本教程：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 2012-05-03 08:14:56

我不太明白'if（false）'做了什麼。你能解釋一下嗎？ – TerranRich 2013-06-28 14:34:56

PrototypeJS中的浮動菜單

回答

相關問題