首页 新闻 会员 周边

类似的CSS定位效果是如何实现的？

0
悬赏园豆：20 [已关闭问题] 关闭于 2012-02-21 12:16

希望的效果是像：百度UEditor的功能按钮块部分的定位效果，示例页面：ueditor.baidu.com/onlinedemo.html，
1. 刚进入示例页面时，功能按钮块的css定位是：position:relative；
2. 在将页面滚动条向下移动，当功能按钮块快要移出浏览器窗口界面时，整个按钮功能块的css定位会变为：position:fixed，从而可以一直停留在浏览器窗口的最上方，方便用户继续编辑。

问题补充：

给这个效果一个术语“智能浮动”，

网上有实现，通过扩展jquery，参考连接：

http://www.wufangbo.com/jquery-position-fixed-bug/

算是已解决，结贴。
dboy8454的主页 dboy8454 | 初学一级 | 园豆：174
提问于：2012-02-20 14:48
< >
分享
所有回答(4)
0

你使用JQUERY来改变当页面滚动是POSITION的属性试试。

VampireEarl | 园豆：21 (初学一级) | 2012-02-21 02:07

现在主要想知道：某个元素移出/移入浏览器可见窗口，这个事件怎么来判断，一旦知道这个，修改元素的position定位就很容易了。

很多js框架都可以实现相关的功能，如图片网站上的图片Lazy Loading其实也是类似功能的使用。

支持(0) 反对(0) dboy8454 | 园豆：174 (初学一级) | 2012-02-21 11:04
0

不用脚本也可以实现智能漂浮，直接用CSS定义position：fixed这个属性就可以实现，不过这个在IE6下不兼容，不过网上有这个BUG的解决方法，本人在最近的做的网页中就用过这个，可以达到IE，火狐都兼容。

JCWK | 园豆：68 (初学一级) | 2012-04-04 22:12
0

fixed，这个只有ie6不兼容，ie6以上都可以。ie6的话，就是要用脚本特殊处理下。

icepy | 园豆：587 (小虾三级) | 2012-04-27 09:42
0

scroll事件判断，和css修改。比如，jquery的话，可以简单的表达下：

 

 1 $(window).scroll(function(){
 2 
 3 　　if($(window).scrollTop()>300){ //如果滚动高度超过300像素
 4 
 5 　　　　$("元素选择器").css({position:"fixed"})//元素的定位变换为固定浮动
 6 
 7 　　}
 8 
 9 　　$("元素选择器").css({position:"relative"})//否则，定位为相对定位
10 
11 })

 

当然，要做到兼容，还得拓展其他方法，

djyuning | 园豆：213 (菜鸟二级) | 2012-07-21 15:40
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。