侧边工具条实现scss+requirejs（1）

慕课上的一个案例，刚刚学完scss然后找到了这个课程复习一下。顺便老师教了一下requirejs的使用。这可是我的第一个组件啊，拖了好久好久哦。

) no-repeat; } .toolbar-item{ width:100%; height: $toolbar-size; display: block; position: relative; margin-top: 1px; @include transition(all ease-in-out 0.5s); &:hover{ .toolbar-layer{ @include opacity(1); @include scale(scale(1)); @include transform-origin(95% bottom); @include transition(all ease-in-out 1s); } @include transition(all ease-in-out 0.5s); } } .toolbar-item-weixin { @include toolbar-item(0 -798px,0 -860px); .toolbar-layer{ height:212px; background-position:0 0; } } .toolbar-item-feedback{ @include toolbar-item(0 -426px,0 -488px); } .toolbar-item-app{ @include toolbar-item(0 -550px,0 -612px); .toolbar-layer{ height:194px; background-position:0 -222px; } } .toolbar-item-top{ @include toolbar-item(0 -674px,0 -736px); // display: none; } .toolbar-layer{ width: 172px; position: absolute; right: $toolbar-size - 6; bottom: -10px; @include opacity(0); @include scale(scale(0.01)); @include transform-origin(95% bottom); @include transition(all ease-in-out 1s); }

通过requirejs，jq实现功能 （这里主要是回到顶部的功能）

+ 通过script标签引入requirejs，然后并引入入口文件main.js
+ 通过config给一些引用设置别名，比如对于jquery-2.1.1.min设置为jquery
+ 引入模块，这里指jquery

// 通过config给一些引用设置别名
requirejs.config({
    //注意paths写法，我已经栽了两次跟头了
    paths:{
        jquery:'jquery-2.1.1.min'
    }
});

// 引入模块，并通过一个变量表示引入模块，惯例用$
requirejs(['jquery'],function($){
    //移动函数，可以通过设置移动时间来改变交互效果
    $('#backTop').on('click',move);
    //判断返回顶部按钮是否出现,传入当前窗口高度，当滚动高度大于当前窗口高度时，显示按钮
    //特别注意，每次滚动的时候需要判断，以及初始化页面的时候需要判断
    $(window).on('scroll',function(){
        checkPosition($(window).height());
    });
    //这个缺点是反应很慢TOT，所以需要在css上设置一个初始化display为none
    checkPosition($(window).height() / 2);

    function move(){
        $('body,html').animate({
            scrollTop:0
        },500,'linear');
    }

    function checkPosition(Pos){
        if($(window).scrollTop() > Pos){
            $('#backTop').show();
        }else{
            $('#backTop').hide();
        }
    }
});