Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

[求助] 如何使得列表右侧跟内容页那样拖动时跟着内容浮动

[复制链接]
再不疯狂我们就 发表于 2014-3-3 20:11:31 | 显示全部楼层 |阅读模式
本帖最后由 再不疯狂我们就 于 2014-3-3 20:21 编辑



如何使得列表右侧当滚动屏幕时,右区域将跟随左列表浮动,填区域很高时导致的右侧空白
就想帖子内容页那样

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
梦了无痕 发表于 2014-3-6 14:15:18 | 显示全部楼层
可以实现,不是一句话搞定的,有偿帮忙修改
回复

使用道具 举报

兲楽 发表于 2014-3-6 14:58:54 | 显示全部楼层
发点案例看看!
回复

使用道具 举报

 楼主| 再不疯狂我们就 发表于 2014-3-6 17:57:00 | 显示全部楼层
本帖最后由 再不疯狂我们就 于 2014-3-6 18:23 编辑
兲楽 发表于 2014-3-6 14:58
发点案例看看!

dz的帖子内容页个人信息就是      可以直接调用这个 但是我不会
百度贴吧主页  新版QQ空间个人中心的侧边都是css定位 然后用js实现效果
回复

使用道具 举报

兲楽 发表于 2014-3-6 18:42:22 | 显示全部楼层
再不疯狂我们就 发表于 2014-3-6 17:57
dz的帖子内容页个人信息就是      可以直接调用这个 但是我不会
百度贴吧主页  新版QQ空间个人中心的侧 ...

就好像类似于顶部的这个导航一样,是吗
回复

使用道具 举报

 楼主| 再不疯狂我们就 发表于 2014-3-6 21:57:55 | 显示全部楼层
兲楽 发表于 2014-3-6 18:42
就好像类似于顶部的这个导航一样,是吗

是的那
回复

使用道具 举报

兲楽 发表于 2014-3-6 22:29:42 | 显示全部楼层

跟CSS有关,你可以去研究下,可以研究下顶部那个是怎么实现
回复

使用道具 举报

道德经250 发表于 2014-3-8 16:08:31 | 显示全部楼层
这个本事我也帮客户做过,楼主还是没有做好可以qq1191596141
回复

使用道具 举报

灰灰菜 发表于 2014-6-4 14:31:25 | 显示全部楼层
其实就跟返回顶部的原理一样,自己研究研究就出来了。


引用的JS:

这是浮动网页插入的JS:

  1. <P> <script type="text/javascript">
  2. //浮动导航
  3. function float_nav(dom){
  4. var right_nav=$(dom);
  5. var nav_height=right_nav.height();
  6. function right_nav_position(bool){
  7.   var window_height=$(window).height();
  8.   var nav_top=(window_height-nav_height)/2;
  9.   if(bool){
  10.    right_nav.stop(true,false).animate({top:nav_top+$(window).scrollTop()},400);
  11.   }else{
  12.    right_nav.stop(true,false).animate({top:nav_top},300);
  13.   }
  14.   right_nav.show();
  15. }

  16. if(!+'\v1' && !window.XMLHttpRequest ){
  17.   $(window).bind('scroll resize',function(){
  18.    if($(window).scrollTop()>300){
  19.     right_nav_position(true);   
  20.    }else{
  21.     right_nav.hide();
  22.    }
  23.   })
  24. }else{
  25.   $(window).bind('scroll resize',function(){
  26.    if($(window).scrollTop()>300){
  27.     right_nav_position();
  28.    }else{
  29.     right_nav.hide();
  30.    }
  31.   })
  32. }
  33. }
  34. float_nav('#float');
  35. float_nav('#left_nav');
  36. </script></P>
复制代码

源自:www.plalanse.com

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

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

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-17 16:43 , Processed in 0.026738 second(s), 4 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

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