javascript – 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的起点.

所以我得到了它的工作,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垂直或其他东西,所以它挂钩到位.

最佳答案 如果你想要它看起来不稳定,你将不得不使用动画库.如果您正在使用Prototype,那么最好的办法是在
http://script.aculo.us/查看Scriptaculous

我还建议在DOM加载时使用Element.cumulativeOffset来获取菜单的绝对顶部偏移量.然后每次滚动菜单元素时,请包含此初始填充,以便菜单不会仅锁定到视口的顶部.

还有一个想法,如果你不特别想使用动画库,你可以尝试使菜单位置:固定.你仍然需要不断更新IE的位置,因为它不支持固定定位……

点赞