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

实现用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. memcached性能监控

    在上文“在Windows .NET平台下使用Memcached”中,我给大家介绍了如何在Windows平台上部署Memecached服务端,如何在.NET平台中应用Memcached,详细介绍了两种流 ...

  2. HDU 5698 瞬间移动

    瞬间移动 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...

  3. 【Python】Python-skier游戏[摘自.与孩子一起学编程]

    这是一个滑雪者的游戏. skier从上向下滑,途中会遇到树和旗子,捡起一个旗子得10分,碰到一颗树扣100分,可以用左右箭头控制skier方向. 准备素材 一 准备python环境:我下载的pytho ...

  4. 黑盒测试用例设计方法&理论结合实际 -> 边界值分析法

    一. 概念 边界值分析法就是对输入或输出的边界值进行测试的一种黑盒测试方法.通常边界值分析法是作为对等价类划分法的补充,这种情况下,其测试用例来自等价类的边界. 二. 边界值分析法的应用 根据大量的测 ...

  5. WebKit 内核浏览器 initKeyboardEvent 函数原型

    学习JS发送自定义键盘(KeyboardEvent)事件的过程中,遇到了一个小难题:单个按键Tab可以正常发送,焦点能够转移到下一个元素,但想实现Shift+Tab,反向移动焦点时,却被DOM3的浏览 ...

  6. MSP430看门狗

    其实430的看门狗,与51的大同小异,都是为了防止程序跑飞而出现不可预知的错误而专门设定的,所以说,看门狗的应用,是项目马上要进行实际应用中必须要进行的一环,也是电子工程师必须掌握的一环,下面介绍一下 ...

  7. CPU的ADDR2为什么跟SDRAM的0地址线接在一起

    出处:http://www.100ask.org/bbs/forum.php?mod=viewthread&tid=11544&fromuid=5490 最近看到坛子里很多初学者对于C ...

  8. Magento输入正确的登陆名和密码无法进入后台

    请找到 这个文件夹: app\code\core\Mage\Core\Model\Session\Abstract 然后修改Varien.php这个文件: 找到代码(大约88行): $cookiePa ...

  9. android NDK 实用学习（五）-c++端调用java接口

    1,阅读此文章前请阅读前面文章,以免阅读出现障碍: android NDK 实用学习(一)-获取java端类及其类变量 android NDK 实用学习(二)-java端对象成员赋值和获取对象成员值 ...

  10. C++&OpenCV中读取灰度图像到数组的两种

    如标题所言,此处是对于灰度图像而言 ///method 1 read the image data one by one for (int row = 0, i = 0;row < imgDst ...