实现侧边栏滚动的多种技术,基于CSS,jQuery or MooTools

当我们,页面内容的篇幅很长的时候,我们需要拼命的向下滚动页面,鼠标滚动的次数过多,难免有些让人不耐烦。这样,就需要在文章的侧面需要一个“目录侧栏”,如果“目录侧栏”跟着滚动页面动作移动那就更好了,非常有利于用户体验,有很多方法去做“Number”。本文就告诉你实现侧边栏滚动的多种技术。

我们将讨论两个:CSS和JavaScript(jQuery,MooTools)技巧。

本文的教程来自:Scroll/Follow Sidebar, Multiple Techniques,具体内容请看原英文内容。

网站:css-tricks.com

scrollingsidebar

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;
}

使用此技术,当向下滚动页面时,使侧边栏永远停留在你的旁边。

 

View Demo

 

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
            });
        }
    });
 
});

 

View Demo

 

The MooTools

David Walsh Blog上有一个很好好的实例,在我的网站上已成功应用,它是 “MooTools ScrollSidebar”

ScrollSidebar

 

View Demo

站点统计