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中的浮动菜单

回答

相关问题