PrototypeJS中的浮动菜单
有没有人能帮我用prototypeJS做一个浮动菜单？我在浮动菜单中找到了这样的文档，比如这里: net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/和jQuery :manos.malihu.gr/jquery-浮动-menu，但是我不知道从哪里开始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这样的垂直方向，所以它挂在适当的位置。
回答 2
Stack Overflow用户
发布于 2010-09-19 07:53:01
如果你不想让它看起来起伏不定，你就必须使用动画库。如果您正在使用Prototype，那么最好的选择就是在http://script.aculo.us/上研究一下脚本
我还建议在DOM加载时使用Element.cumulativeOffset来获得菜单的绝对顶部偏移量。然后，每次滚动菜单元素时，包括这个初始填充，这样菜单就不会仅仅停留在视口的顶部。
还有一个想法，如果你不是特别想使用动画库，你可以尝试制作菜单position: fixed。你仍然需要不断更新IE的位置，因为它不支持固定定位……
Stack Overflow用户
发布于 2010-09-21 22:53:08
在一些帮助下弄清楚了。使用了此教程：http://jqueryfordesigners.com/fixed-floating-elements/
但将其更改为使用原型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' });
}
}
});https://stackoverflow.com/questions/3743302
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号