首页 新闻 搜索 专区 学院

类似的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
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册