功能描述
首先, 我认为该功能不应该出现在 IE6 中, 因为 IE6 不支持原生的 position:fixed 来固定元素位置, 如果我们使用类似回到顶部按钮淡入淡出或者滑动的跟随, 因为跟随区块较大, 这将会令用户感到不适.
当页面滚动条在跟随区域下方, 那么跟随区域变为浮动, 跟随页面滚动; 如果滚动条回到元素上方, 跟随区域回到原来的位置上. 现在就可以滚动看看本博客侧边栏的效果.
参数描述
•element: 跟随区域的节点对象.
•prevElement: 上方的节点对象. (已经不需要这个参数)
•distanceToTop: 节点上边到页面顶部的距离.
1. 下载文件
提供原生 JavaScript 和 jQuery 两个版本下载：ps://github.com/wuzhao/sidebar-follow">从 GitHub 下载
2. 插入 JavaScript 和添加执行脚本
在页面底部 </body> 之前加入代码
原生 JavaScript：
| 代码如下 | 复制代码 |
|
<script src="sidebar-follow.js"></script> <script> /* <![CDATA[ */ (new SidebarFollow()).init({ element: 'sidebar-follow', prevElement: 'recent-comments', distanceToTop: 15 }); /* ]]> */ </script> |
|
jQuery：
| 代码如下 | 复制代码 |
|
<script src="jquery.js"></script> <!-- 如果已在网站的其他地方引入 jQuery, 请不要在次引入 --> <script src="sidebar-follow-jquery.js"></script> <script> /* <![CDATA[ */ (new SidebarFollow()).init({ element: jQuery('#sidebar-follow'), prevElement: jQuery('#recent-comments'), distanceToTop: 15 }); /* ]]> */ </script> |
|
参数：
element: 跟随区域的节点对象
prevElement: 上方的节点对象
distanceToTop: 节点上边到页面顶部的距离
方法二：
JS：
| 代码如下 | 复制代码 |
| <script type="text/javascript"> jQuery(document).ready(function() { var a = $("#abc").offset(); $(window).scroll(function() { var b = $(window).scrollTop(); if (b > a.top + 40) { $("#abcad").addClass("fixed") } else { $("#abcad").removeClass("fixed") } }); }); </script> |
|
CSS：
| 代码如下 | 复制代码 |
| .fixed { position:fixed; top:40px; width:300px; } |
|
PHP：
| 代码如下 | 复制代码 |
| <div id="abc"> <div id="abcad"> <center style="background: url(/2893f5/18a75936/hello.gif) no-repeat center;height: 250px;"> <!-- 广告位：300*250 --> <script type="text/javascript" >BAIDU_CLB_SLOT_ID = "491497";</script> <script type="text/javascript" src=www.111cn.net></script> </center> </div> </div> |
|
时间： 2025-01-20 13:12:57