jQuery:固定的顶部菜单,像在Facebook和Twitter
jQuery: fixed top menu like in Facebook and Twitter
如何用jQuery做到这一点?
我知道如何用css (position:fixed)做到这一点,但是IE的问题(不知道固定位置)让我担心。
可能有一些插件,但我没有找到它…
谢谢!
position: fixed;
是position: absolute; position: relative;
和position: static;
的替代品。position: fixed;
与position: absolute;
基本相同,除了当用户滚动页面时,元素不与之一起滚动,它只是准确地显示
问题是最流行的浏览器——Internet Explorer for Windows——不理解它,它不是恢复到position: absolute;
(这比什么都没有好),而是恢复到position: static;
(这是CSS标准指定的)。这与完全没有定位具有相同的效果。注意ie7 beta 2以上的版本支持position: fixed;
一些作者使用> CSS选择器来隔离Internet Explorer,并将元素完全放置在该浏览器中,而没有滚动效果。
div#fixme { position: absolute; left: 0px; top: 0px; }
body > div#fixme { position: fixed; }
或
div#fixme {
left: expression( document.body.scrollLeft + 'px' );
top: expression( document.body.scrollTop + 'px' );
}
body > div#fixme { position: fixed; left: 0px; top: 0px; }
我注意到一些有点奇怪的事情。如果我将值赋给一个变量,然后使用它将其赋给表达式inline,它在Internet Explorer 5.5和6中确实更新了。它有点不稳定,但不像许多脚本驱动的定位技术那么糟糕。
top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );
ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
或
<style type="text/css">
#fixme {
/* Netscape 4, IE 4.x-5.0/Win and other lesser browsers will use this */
position: absolute; right: 20px; bottom: 10px;
}
body > div#fixme {
/* used by Opera 5+, Netscape6+/Mozilla, Konqueror, Safari, OmniWeb 4.5+, iCab, ICEbrowser */
position: fixed;
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( -20 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -10 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
这里有一篇很棒的文章关于css位置固定以及如何在IE6及以上版本上实现这一点。如果你需要任何帮助,请告诉我。
相关文章:
- 使用javascript反复检查用户在facebook上的登录状态
- 在SVG地图上添加水的渐变,就像在谷歌地图(PHP/JS)中一样
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- 使用api在facebook页面上发布图片或状态
- 使用jQuery/Javascript在Facebook上发送消息
- 使用FB.api在Facebook上发布消息
- 为什么可以'我们在函数体中为函数对象添加属性,就像在javascript中为对象文字添加属性一样
- 在分享页面URL时,有没有办法在Facebook上分享高质量的页面截图
- 我如何让按钮像在javascript中从键盘按回车键一样工作
- 将标题标签与数据库连接并使其自动刷新,就像在Facebook标题中一样
- 加载更多项目,而无需滚动或按“查看更多”,就像在Facebook中使用JS一样
- 当链接悬停时创建一个弹出窗口,就像在facebook中一样,当你把光标放在链接上时,它会显示发送消息等选项
- 如何像在Facebook中一样实现后期视频功能
- jQuery:固定的顶部菜单,像在Facebook和Twitter
- 如何在Asp.net中使用c#创建编辑缩略图功能,就像在facebook中一样(同时上传显示图像)
- 当你在facebook聊天中收到一条新消息时,如何像facebook那样更改文档'
- 如何使写短消息像在facebook上
- 如何动态地改变行计数在文本区域,就像在facebook对话框
- 如何使用客户端浏览器滚动加载HTML内容,就像在facebook主页一样
- 自动时间增量像在facebook (jquery)