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

实现用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. NopCommerce架构分析之一----依赖类生成容器

    NopCommerce为了实现松耦合的框架设计目的,使用了IOC框架:Autofac.据有人测试,Autofac是性能好的IOC工具. 1.在IOC中,组件首先需要在IOC中注册,有通过配置文件注册的 ...

  2. 【转】Linux（Ubuntu）下面SecureCRT 完全破解

    仅供测试, 勿用作商业用途.首先要到vandyke网站下载一个securecrt, 需要注册.http://www.vandyke.com/download/securecrt/download.ht ...

  3. C#操作Json(转)

    原文:http://wenku.baidu.com/link?url=3dlqKdF26ZdQIAcX9jvP2ZYEtl3J0sKOV8XuHQI0Rz4SjB9S46nqmGiMXUVQa_1Pm ...

  4. MMU（what,how,todo）

    出处:http://www.100ask.org/bbs/forum.php?mod=viewthread&tid=11580&fromuid=5490 正文黑色,代码蓝色,重点标红. ...

  5. leetcode—Best Time to Buy and Sell stocks III

    1.题目描述 Say you have an array for which the ith element is the price of a given stock on day i.   Des ...

  6. HW6.15

    import java.util.Scanner; import java.util.ArrayList; public class Solution { public static void mai ...

  7. [NOI2005]维修数列 Splay tree 区间反转,修改,求和,求最值

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1500 Description Input 输入文件的第1行包含两个数N和M,N表示初始时数 ...

  8. Java深度遍历文件夹(递归实现)

    package FileDemo; import java.io.File; public class DeepSearchDir { /** * @param args */ public stat ...

  9. Fun with layers

    Fun with layers 这篇文章的有些内容很奇怪,我根本就没有这种现象,所以暂时就这样吧 In this post, I’ll explain how to add a border, rou ...

  10. iOS--消息推送后方法回调情况(简)

    消息推送 工作 --- 消息推送   消息推送 消息推送集成参考友盟 http://dev.umeng.com/push/ios/integration 注意测试环境下,(友盟)设备在手机启动程序的时 ...