这效果相信已经在各大网站上见过,例如卢松松,IPC.ME,WP酷等等。我们的网站大多数都分为头部、尾部、正文和侧边栏。有时正文稍微长了点,侧边栏就会呈现一片“空白”状态:
这……很是尴尬啊,所以这里整理了一个比较常见的侧边栏跟随页面滚动效果供大家使用。除此之外还有另外一种方法供您使用:jQuery实现侧边栏随滚动条滚动并固定位置
效果基本为当页面滚动条在跟随区域下方, 那么跟随区域变为浮动, 跟随页面滚动; 如果滚动条回到元素上方, 跟随区域回到原来的位置上。代码来自NeoEase。
1. 下载所需文件
这里提供原生 JavaScript 和 jQuery 两个版本可供下载:
从 GitHub 下载
2. 插入 JavaScript 和添加执行脚本
在页面底部的</body>之前加入代码, 原生 JavaScript 例子如下:
<script src="sidebar-follow.js"></script> <script> /* <![CDATA[ */ (new SidebarFollow()).init({ element: 'sidebar-follow', 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'), distanceToTop: 15 }); /* ]]> */ </script>
两种方法二选一,实现的效果相同。之后将在需要实现效果的地方套上:
<div id="sidebar-follow" style="top: 20px; position: fixed;"> </div>
即可,其中的top:20px请自行修改。
你网站在IE9显示错位不正常啊!
友情链接交换!愿意请访问:http://www.i908.net/?page_id=136 留言!
@程凯 正在努力修复中……
@WP酷 非常感谢您的提醒!目前本站已完美支持IE7/8/9/10,暂不支持IE6,请帮忙测试一下是否有错误。
@WP酷 右边回到顶部按钮背景颜色建议加鲜艳的颜色以便访客发现方便回到顶部,鼠标移到按钮形状个人感觉还是小手比较好,符合大部分访客习惯!
@程凯 嗯嗯正有此意,趁现在有时间我去改下
能实现这个效果的代码有很多呢,样式很多而功能上不尽相同的
@蚊哥 对的,不过网上的方法基本上我试过只有这个比较好用……
你好,按照这种方法尝试了之后,有跟随页面的效果了,但是跑 到最上面把别的盖住了,我感觉是我放 的位置不对,可以向您请教一下吗?
@lioil_pw 对的我也是这样……所以我只放一个
有没有demo啊,我试了一下没有实现啊