一、效果图（如下）及使用的技术

实现用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

   }

 });

sass+require实现侧边栏的更多相关文章

  1. PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用

    如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...

  2. Sass学习笔记之入门篇

    Sass又名SCSS,是CSS预处理器之一,,它能用来清晰地.结构化地描述文件样式,有着比普通 CSS 更加强大的功能. Sass 能够提供更简洁.更优雅的语法,同时提供多种功能来创建可维护和管理的样 ...

  3. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  4. Sass学习之路：Sass、Compass安装与命令行

    导言 CSS不是一门真正意义上的编程语言,很多编程语言理所当然的特性(比如变量),都不被支持.同时再开发模块化的web项目的时候,也要避免相互干扰.为了弥补CSS的这些不足,就产生了CSS预处理器,S ...

  5. Sass学习之路(4)——不同样式风格的输出方式

    因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种. 比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧: nav { ...

  6. 续Gulp使用入门编译Sass

    使用 gulp 编译 Sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了开发者的时间,使得 CSS 的开发,变得简单和可维护. 安装 npm install gulp-s ...

  7. sass mapsource --->gulp

    详细,请戳这里 1.安装插件 npm install --save-dev gulp-sass gulp-sourcemaps gulp-autoprefixer 如果安装错误,请用sudo 权限: ...

  8. sass sublime text 2 gulp ionic

    sass 安装1.全局安装 sass 我的Mac 所以不用再安装Ruby ,直接在终端输入 gem install sass 然后在终端中输入 sass -v 出现 Sass 3.4.8 (selec ...

  9. gulp sass使用

    var gulp = require("gulp");var sass = require("gulp-sass-china");var dgbl = requ ...

随机推荐

  1. Python的数据类型的一些知识

    int 类型表示(正负)整数,str 类型表示字符串(Unicode字符序列): 所表示的整数大小只受限于机器内存,而非固定的字节数. 字符串可以用双引号或是单引号封装,需要成对的出现. 传统上,py ...

  2. IO_REMOVE_LOCK使用方法小结（转载加改正）

    原文链接:http://www.programlife.net/io_remove_lock.html IO_REMOVE_LOCK(删除锁)的具体结构没有公开,WDK的文档中中查不到IO_REMOV ...

  3. bzoj 3130 [Sdoi2013]费用流（二分，最大流）

    Description Alice和Bob在图论课程上学习了最大流和最小费用最大流的相关知识.    最大流问题:给定一张有向图表示运输网络,一个源点S和一个汇点T,每条边都有最大流量.一个合法的网络 ...

  4. sprintf的缓冲区溢出

    sprintf的缓冲区溢出 分类: 技术2010-03-07 15:26 362人阅读 评论(0) 收藏 举报 今天,调试sector的时候遇到一个特奇怪的问题,程序会在取string的c_str() ...

  5. CentOS 6.5 安装配置VSFTP

    1.下载安装VSFTP 首先查看当前系统是否已经安装VSFTP,若未安装则使用yum安装. chkconfig --list | grep vsftpd #查看是否安装 yum install vsf ...

  6. POJ3016-K-Monotonic（左偏树＋DP）

    我觉得我要改一下签名了……怎么会有窝这么啰嗦的人呢? 做这题需要先学习左偏树<左偏树的特点及其应用> 然后做一下POJ3666,这题的简单版. 思路: 考虑一下维护中位数的过程原数组为A, ...

  7. Google的IP地址一览表,加上代理服务器

    Bulgaria 93.123.23.1 93.123.23.2 93.123.23.3 93.123.23.4 93.123.23.5 93.123.23.6 93.123.23.7 93.123. ...

  8. 起底多线程同步锁(iOS)

    iOS/MacOS为多线程.共享内存(变量)提供了多种的同步解决方案(即同步锁),对于这些方案的比较,大都讨论了锁的用法以及锁操作的开销,然后就开销表现排个序.春哥以为,最优方案的选用还是看应用场景, ...

  9. 如何自己动手实现 KVO(转)

    KVO (Key-Value Observing) KVO 是 Objective-C 对观察者模式(Observer Pattern)的实现.也是 Cocoa Binding 的基础.当被观察对象的 ...

  10. session和request的区别

    request 请求对象 请求中保存请求过程中需要的参数 比如另一个页面需要使用的对象编号,list,map等,请求结束,就失效了 session 会话对象 除非关闭会话(到时间通常为30分钟,或者关 ...