sass+require实现侧边栏

实现用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如下：

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
10 
11 
12 　　

使用requirejs很简单，只需要在head中通过script标签引入它（实际上除了require.js，其它文件模块都不再使用script标签引入）。

细心的同学会发现script标签上了多了一个自定义属性：data-main="main"，等号右边的main指的main.js。当然可以使用任意的名称。

这个main指主模块或入口模块，好比c或java的主函数main。

main.js如下

1 require.config({
2 paths: {
3 jquery: 'jquery-1.11.3'//此处用不用添加.js后缀，否则执行的时候会报错
4 }
5 });
6 
7 require(['jquery'], function($) {
8 alert($().jquery);
9 });

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部分：

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 

 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
测试
 24 
测试
 25 
测试
 26 
测试
 ...
119 
测试
120 
测试
121 
测试
122 
测试
123 
124 
125 

2、css & scss部分：

scss文件夹中的：

(1) _mixin.scss: scss可以像js一样，将一些公共的样式封装成函数，便于重复利用

 1 @mixin opacity($opacity){
 2 opacity: $opacity;
 3 filter: opacity($opacity * 100);
 4 }
 5 @mixin transform-origin ($transform-origin){
 6 transform-origin: $transform-origin;
 7 -webkit-transform-origin: $transform-origin;
 8 -o-transform-origin: $transform-origin;
 9 -ms-transform-origin: $transform-origin;
10 -moz-transform-origin: $transform-origin;
11 }
12 @mixin scale($scale){
13 transform: scale($scale);
14 -webkit-transform: scale($scale);
15 -o-transform: scale($scale);
16 -ms-transform: scale($scale);
17 -moz-transform: scale($scale);
18 }
19 @mixin transition($transition){
20 transition: $transition;
21 -webkit-transition: $transition;
22 -o-transition: $transition;
23 -ms-transition: $transition;
24 -moz-transition: $transition;
25 }

(2) toobar.scss : 该模块中的自有样式（只在自个模块中使用的）

 1 @import "mixin";
 2 @mixin toolbar-item($pos,$hoverPos){
 3 background-position: 0 $pos;
 4 &:hover {
 5 background-position: 0 $hoverPos;
 6 }
 7 
 8 }
 9 $toolbar-size: 52px;
10 
11 .toolbar-item, .toolbar-layout {
12 background-image: url(../img/toolbar.png);
13 background-repeat: no-repeat;
14 }
15 .toolbar {
16 position: fixed;
17 left: 50%;
18 bottom: 100px;
19 margin-left: -$toolbar-size / 2;
20 }
21 .toolbar-item {
22 position: relative;
23 display: block;
24 width: $toolbar-size;
25 height: $toolbar-size;
26 margin-top: 1px;
27 
28 @include transition(background-position 1s);
29 &:hover {
30 .toolbar-layout {
31 @include opacity(1);
32 @include scale(1);
33 @include transition(all 1s);
34 }
35 }
36 
37 }
38 .toolbar-layout {
39 position: absolute;
40 right: $toolbar-size - 5;
41 bottom: 0;
42 width: 172px;
43 @include transform-origin(95% 95%);
44 @include opacity(0);
45 @include scale(0.01);
46 @include transition(all 1s);
47 
48 }
49 .toolbar-item-weixin {
50 @include toolbar-item(-798px, -860px);
51 
52 .toolbar-layout {
53 height: 212px;
54 background-position: 0 0;
55 }
56 }
57 
58 .toolbar-item-feedback {
59 @include toolbar-item(-426px,-488px);
60 
61 }
62 .toolbar-item-app {
63 @include toolbar-item(-550px,-612px);
64 
65 .toolbar-layout {
66 height: 194px;
67 background-position: 0 -222;
68 }
69 }
70 .toolbar-item-top {
71 @include toolbar-item(-674px,-736px);
72 
73 }

(3) index.scss: 该项目引入的样式文件，编译后为index.css，在html中只引入index.css，便于文件管理

1 @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:

 1 define(["jquery","scrollTo"],function($,scrollTo){
 2 
 3 function BackTop(el,opts){
 4 
 5 this.opts = $.extend({},BackTop.defaults,opts);
 6 this.$el =$(el);
 7 
 8 this.scroll = new scrollTo.ScrollTo({
 9 dest: 0,
10 speed:this.opts.speed
11 });
12 
13 if(this.opts.mode === "move"){
14 this.$el.on("click", $.proxy(this._move,this));//改变this指向
15 
16 }else {
17 this.$el.on("click", $.proxy(this._go,this));//改变this指向
18 
19 }
20 
21 this._checkPosition();
22 $(window).on("scroll",$.proxy(this._checkPosition,this));
23 
24 };
25 
26 
27 
28 BackTop.defaults = {
29 mode:'move',//返回顶部的方式，直接返回还是动画返回
30 pos:$(window).height(),//返回顶部按钮显示隐藏的初始值
31 speed:800
32 }
33 
34 BackTop.prototype._move = function(){
35 this.scroll.move();
36 }
37 BackTop.prototype._go = function(){
38 this.scroll.go();
39 }
40 BackTop.prototype._checkPosition = function(){
41 
42 var $el = this.$el;
43 
44 if($(window).scrollTop() > this.opts.pos){
45 
46 $el.fadeIn();
47 }else {
48 $el.fadeOut();
49 }
50 };
51 
52 return {BackTop:BackTop}
53 
54 });

（4）scrollTo.js

 1 define(["jquery"],function($){
 2 
 3 function ScrollTo(opts){
 4 
 5 this.opts = $.extend({},ScrollTo.defaults,opts);
 6 
 7 this.$el = $("html,body");
 8 
 9 };
10 
11 ScrollTo.prototype.move = function(){
12 var opts = this.opts;
13 var dest = opts.dest;
14 //防止动画未结束多次执行动画
15 if($(window).scrollTop() != dest){//判断是否到达目的地
16 
17 if(!this.$el.is(":animated")){//判断是否在运动
18 
19 this.$el.animate({
20 scrollTop:dest
21 },opts.speed);
22 }
23 }
24 
25 };
26 ScrollTo.prototype.go = function(){
27 
28 var dest = this.opts.dest;
29 
30 if($(window).scrollTop() != dest){
31 this.$el.scrollTop(dest);
32 }
33 
34 };
35 ScrollTo.defaults = {
36 dest: 0,//目的地
37 speed:800//滚动速度
38 };
39 return {
40 ScrollTo:ScrollTo
41 }
42 });