一、效果图（如下）及使用的技术
实现用sass实现页面中右侧固定侧边栏的样式，用require.js实现返回顶部的功能
二、sass
具体的sass的介绍就不多说了，大家可以参考sass官网介绍，下面说一下sass的两种编译方法；
a、koala编译
koala 是一款桌面程序，支持 less 、 sass 、 coffeescript 即时编译。下载地址：http://koala-app.com/
koala可以直接对scss进行编译，不需要敲命令，并且可以对scss进行监控，具体使用方法见：http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html
注：此种编译方法比较方便，只要下载koalo即可，新建*.scss文件，拖进工作区点击”完成“，即可，并且可以监控添加到工作区的文件，不用每次点击编译；
b、sass命令编译（推荐）
此方法需要进行以下步骤：
（1）因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。官网下载：ruby；
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境
（2）安装完ruby之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby
然后在命令行中直接输入：
gem install sass
按回车安装，如果安装不成功，可以直接在http://www.w3cplus.com/sassguide/install.html 中下载图中的“sass安装文件”
下载之后放到ruby的安装目录下的gems文件夹中即可（如下图）
安装完成后可以在命令行中输入命令：
* 查看sass版本的命令行为
sass -v
* 你也可以运行帮助命令行来查看你需要的命令
sass -h
* 单文件转换命令
sass style.scss style.css
* 单文件监听命令
sass --watch style.scss:style.css
* 文件夹监听命令
sass --watch sassFileDirectory:cssFileDirectory
三、require.js使用基础
新建一个目录，结构如下
目录toolbar下有index.html、jquery-1.11.3js、main.js、require.js。require.js和jquery-1.11.3.js去各自官网下载即可。
index.html如下：
<!doctype html>
<html>
<head>
<title>requirejs</title>
<meta charset="utf-8">
<script data-main="js/main" src="js/require.js"></script>
</head>
<body> </body>
</html>
使用requirejs很简单，只需要在head中通过script标签引入它（实际上除了require.js，其它文件模块都不再使用script标签引入）。
细心的同学会发现script标签上了多了一个自定义属性：data-main="main"，等号右边的main指的main.js。当然可以使用任意的名称。
这个main指主模块或入口模块，好比c或java的主函数main。
main.js如下
require.config({
paths: {
jquery: 'jquery-1.11.3'//此处用不用添加.js后缀，否则执行的时候会报错
}
});
require(['jquery'], function($) {
alert($().jquery);
});
main.js中就两个函数调用require.config和require。
require.config用来配置一些参数，它将影响到requirejs库的一些行为。
require.config的参数是一个JS对象，常用的配置有baseUrl，paths等。
这里配置了paths参数，使用模块名“jquery”，其实际文件路径jquery-1.11.3.js（后缀.js可以省略）。
注：有些同学习惯用npm 来下载相关文件，在这里有一点需要注意的是：
下载require.js的命令是：
npm install requirejs
而不是( 注 意 )
npm install require.js
四、功能实现
项目目录结构如下：
在命令行输入命令如下，对scss文件夹进行监听并将scss中的scss文件编译到css文件夹中；
1、html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>toolbar</title>
<link rel="stylesheet" href="css/index.css"> </head>
<body>
<div class="toolbar">
<a href="javascript:;" class="toolbar-item toolbar-item-weixin">
<span class="toolbar-layout"></span>
</a>
<a href="javascript:;" class="toolbar-item toolbar-item-feedback"></a>
<a href="javascript:;" class="toolbar-item toolbar-item-app">
<span class="toolbar-layout"></span>
</a>
<a id="backTop" href="javascript:;" class="toolbar-item toolbar-item-top">
<span class="toolbar-btn"></span>
</a>
</div>
<!--下面部分是为了使页面出现滚动条，方便测试-->
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
...
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<script src="js/require.js" data-main="js/main"></script>
</body>
</html>
2、css & scss部分：
scss文件夹中的：
(1) _mixin.scss: scss可以像js一样，将一些公共的样式封装成函数，便于重复利用
@mixin opacity($opacity){
opacity: $opacity;
filter: opacity($opacity * 100);
}
@mixin transform-origin ($transform-origin){
transform-origin: $transform-origin;
-webkit-transform-origin: $transform-origin;
-o-transform-origin: $transform-origin;
-ms-transform-origin: $transform-origin;
-moz-transform-origin: $transform-origin;
}
@mixin scale($scale){
transform: scale($scale);
-webkit-transform: scale($scale);
-o-transform: scale($scale);
-ms-transform: scale($scale);
-moz-transform: scale($scale);
}
@mixin transition($transition){
transition: $transition;
-webkit-transition: $transition;
-o-transition: $transition;
-ms-transition: $transition;
-moz-transition: $transition;
}
(2) toobar.scss : 该模块中的自有样式（只在自个模块中使用的）
@import "mixin";
@mixin toolbar-item($pos,$hoverPos){
background-position: 0 $pos;
&:hover {
background-position: 0 $hoverPos;
} }
$toolbar-size: 52px; .toolbar-item, .toolbar-layout {
background-image: url(../img/toolbar.png);
background-repeat: no-repeat;
}
.toolbar {
position: fixed;
left: 50%;
bottom: 100px;
margin-left: -$toolbar-size / 2;
}
.toolbar-item {
position: relative;
display: block;
width: $toolbar-size;
height: $toolbar-size;
margin-top: 1px; @include transition(background-position 1s);
&:hover {
.toolbar-layout {
@include opacity(1);
@include scale(1);
@include transition(all 1s);
}
} }
.toolbar-layout {
position: absolute;
right: $toolbar-size - 5;
bottom:;
width: 172px;
@include transform-origin(95% 95%);
@include opacity(0);
@include scale(0.01);
@include transition(all 1s); }
.toolbar-item-weixin {
@include toolbar-item(-798px, -860px); .toolbar-layout {
height: 212px;
background-position: 0 0;
}
} .toolbar-item-feedback {
@include toolbar-item(-426px,-488px); }
.toolbar-item-app {
@include toolbar-item(-550px,-612px); .toolbar-layout {
height: 194px;
background-position: 0 -222;
}
}
.toolbar-item-top {
@include toolbar-item(-674px,-736px); }
(3) index.scss: 该项目引入的样式文件，编译后为index.css，在html中只引入index.css，便于文件管理
@import "toolbar";
3、js部分：
（1）jquery-1.11.3.js和require.js是该项目的依赖，可从各自官网下载，也可以通过npm下载，html中只引入require.js即可
（2）main.js是项目的入口文件
require.config({
paths:{
jquery:"./jquery-1.11.3"
}
});
require(['jquery',"backtop"],function ($,backTop) {
var backTop = new backTop.BackTop($("#backTop"),{//构造函数实例化
mode:"move",
dest:0,
speed:500
});
});
（3）backtop.js:
define(["jquery","scrollTo"],function($,scrollTo){
function BackTop(el,opts){
this.opts = $.extend({},BackTop.defaults,opts);
this.$el =$(el);
this.scroll = new scrollTo.ScrollTo({
dest: 0,
speed:this.opts.speed
});
if(this.opts.mode === "move"){
this.$el.on("click", $.proxy(this._move,this));//改变this指向
}else {
this.$el.on("click", $.proxy(this._go,this));//改变this指向
}
this._checkPosition();
$(window).on("scroll",$.proxy(this._checkPosition,this));
};
BackTop.defaults = {
mode:'move',//返回顶部的方式，直接返回还是动画返回
pos:$(window).height(),//返回顶部按钮显示隐藏的初始值
speed:800
}
BackTop.prototype._move = function(){
this.scroll.move();
}
BackTop.prototype._go = function(){
this.scroll.go();
}
BackTop.prototype._checkPosition = function(){
var $el = this.$el;
if($(window).scrollTop() > this.opts.pos){
$el.fadeIn();
}else {
$el.fadeOut();
}
};
return {BackTop:BackTop}
});
（4）scrollTo.js
define(["jquery"],function($){
function ScrollTo(opts){
this.opts = $.extend({},ScrollTo.defaults,opts);
this.$el = $("html,body");
};
ScrollTo.prototype.move = function(){
var opts = this.opts;
var dest = opts.dest;
//防止动画未结束多次执行动画
if($(window).scrollTop() != dest){//判断是否到达目的地
if(!this.$el.is(":animated")){//判断是否在运动
this.$el.animate({
scrollTop:dest
},opts.speed);
}
}
};
ScrollTo.prototype.go = function(){
var dest = this.opts.dest;
if($(window).scrollTop() != dest){
this.$el.scrollTop(dest);
}
};
ScrollTo.defaults = {
dest: 0,//目的地
speed:800//滚动速度
};
return {
ScrollTo:ScrollTo
}
});