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

By Rainbow on // Demos & Downloads , HTML / CSS // 7472 Views+ // (1) Comments

当我们，页面内容的篇幅很长的时候,我们需要拼命的向下滚动页面，鼠标滚动的次数过多，难免有些让人不耐烦。这样，就需要在文章的侧面需要一个“目录侧栏”，如果“目录侧栏”跟着滚动页面动作移动那就更好了，非常有利于用户体验，有很多方法去做“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

分享到： 更多

文章评论 已经有 1 条评论！

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

站点统计