实现侧边栏滚动的多种技术,基于CSS,jQuery or MooTools
当我们,页面内容的篇幅很长的时候,我们需要拼命的向下滚动页面,鼠标滚动的次数过多,难免有些让人不耐烦。这样,就需要在文章的侧面需要一个“目录侧栏”,如果“目录侧栏”跟着滚动页面动作移动那就更好了,非常有利于用户体验,有很多方法去做“Number”。本文就告诉你实现侧边栏滚动的多种技术。
我们将讨论两个:CSS和JavaScript(jQuery,MooTools)技巧。
本文的教程来自:Scroll/Follow Sidebar, Multiple Techniques,具体内容请看原英文内容。
CSS 技术
最简单的处理方法就是使用CSS固定定位( CSS fixed positioning)。
The HTML Code
1 2 3 4 | <div id="page-wrap"> <div id="main"></div> <div id="sidebar"></div> </div> |
The CSS Code
1 2 3 4 5 6 7 8 9 10 11 | #page-wrap { width: 600px; margin: 15px auto; position: relative; } #sidebar { width: 190px; position: fixed; margin-left: 410px; } |
使用此技术,当向下滚动页面时,使侧边栏永远停留在你的旁边。
JavaScript 技术
如果我们使用JavaScript,主要用到的是 window.scroll 事件。
代码优化来自 Doug Neiner:
The jQuery JavaSript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | $(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); |
The MooTools
在David Walsh Blog上有一个很好好的实例,在我的网站上已成功应用,它是 “MooTools ScrollSidebar”。
非常不错,正想试试看~