收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1599|回复: 6

[CSS3] 请问怎么让B只在A的左边浮动

[复制链接]
发表于 2015-3-19 11:12:40 | 显示全部楼层 |阅读模式
未标题-1.jpg

请问怎么让B只在A的左边浮动
不挡住底部

我用的是JQ
  1. .fixed_right {
  2.         position:fixed;
  3.         _position:absolute;
  4.         top:0px;
  5.         width:220px;
  6.         bottom:600px;
  7. }
复制代码

  1.                 <div class="sidebar">
  2. <div id="fixed_area">                                <div class="p_list">
  3.                                     <!-- #include file="../style/data_sort_pro.asp" -->
  4.                                 <!-- #include file="../template/sort_product.dta" -->
  5.                                 </div>
  6.                                 <div style="height:580px;"></div>
  7. </div>
  8.                         </div>
复制代码


  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.         var l = true;
  4.         var top = $("#fixed_area").offset().top;
  5.         function doFix()
  6.         {              
  7.                 var scrolla=$(window).scrollTop();
  8.                 var dis=parseInt(top)-parseInt( scrolla);
  9.                 if(l && dis<=0)
  10.                 {               
  11.                         $("#fixed_area").removeClass().addClass("fixed_right");
  12.                         l=false;
  13.                 }
  14.                 if(!l && dis>0)
  15.                 {
  16.                         $("#fixed_area").removeClass("fixed_right");
  17.                         l=true;
  18.                 }
  19.         }
  20.         $(window).scroll(doFix);
  21. });
  22. </script>       
复制代码
 楼主| 发表于 2015-3-19 11:13:41 | 显示全部楼层
就像左边的图像  只在固字的位置浮动
回复 支持 反对

使用道具 举报

发表于 2015-3-19 12:14:05 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2015-3-19 12:20:51 | 显示全部楼层
本帖最后由 jianwang19 于 2015-3-19 12:22 编辑

上面使用了fixed,在IE6下可又能不是那么好用,这个只使用了absolute

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-3-19 17:16:36 | 显示全部楼层
jianwang19 发表于 2015-3-19 12:20
上面使用了fixed,在IE6下可又能不是那么好用,这个只使用了absolute
[html]

chrome 上看不到效果?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-3-19 17:16:53 | 显示全部楼层
wxkj8176 发表于 2015-3-19 17:16
chrome 上看不到效果?

我在本机试下
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-3-25 14:00:20 | 显示全部楼层
jianwang19 发表于 2015-3-19 12:20
上面使用了fixed,在IE6下可又能不是那么好用,这个只使用了absolute
[html]

非常好用  谢谢
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-4 16:01 , Processed in 0.093515 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表