側邊欄滾動跟隨

html文件

<div id="sidebar1">
    <p>瞭解&諮詢</p>
    <ul>
        <li>
            <a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" target="_blank">
                <img src="{%$rootpath%}img/qq.jpg" alt="">
                QQ諮詢
            </a>
        </li>
        <li>
            <a href="javascript:void(0);">
                <img src="{%$rootpath%}img/public.jpg" alt="" style="width: 79px;height: 83px;">
                微信公衆號
            </a>
        </li>
        <li>
            <a href="{%find:type class=17 out=link%}">
                <img src="{%$rootpath%}img/map.png" alt="">
                交通路線
            </a>
        </li>
        <li id="backTop">
            <a href="javascript:void(0);">
                <img src="{%$rootpath%}img/top.png" alt="">
                返回頂部
            </a>
        </li>
    </ul>
</div>

less文件（less裏面的帶.用的以前隨筆有less的實用的實例應用）

/*****sidebar1*****/
#sidebar1{
  position: absolute;
  right: 10%;
  top: 200px;
  width: 130px;
  background: white;
  height: 500px;
  overflow: hidden;
  .border-radius(20px);
  border:1px solid #E7E7E7;
  .box-shadow(2px,2px,5px,#E7E7E7);
  z-index:999;
  >p{
    width: 100%;
    .ver-m(60px);
    background:#FF70F7;
    color:white;
    font-size: 16px;
    text-align:center;
  }
  ul{
    li{
      &:last-child{
        >a{border:none;}
      }
      >a{
        display: block;
        .box-sizing();
        margin:0 10px;
        border-bottom:1px solid #E8E8E8;
        text-align:center;
        font-size: 14px;
        color:#999;
        padding:12px 0;
        >img{
          margin:0 auto;
          margin-bottom: 10px;
        }
      }
    }
  }
}

引入js文件，需引入jquery文件

$(document).ready(function($) {
  function Header(){
  }
  //obj1 側邊欄對象
  //topPadding 下滑後側邊欄距離窗口的值
  //bottomMargin 當前選中頁面對象
  Header.prototype.sidebar1 = function(obj1,topPadding,bottomMargin){
    var sidebar1_top = $(obj1).offset().top,
        topPadding = topPadding,
        document_h = $(document).height();
    $(window).scroll(function() {
        var sideBar_h = $(obj1).height(),
            window_top = $(this).scrollTop();
        if ( window_top > sidebar1_top) {
            var newPosition = ( window_top - sidebar1_top) + topPadding,
                maxPosition = document_h - (sideBar_h + bottomMargin);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $(obj1).stop().animate({
                marginTop: newPosition
            },500);
        } else {
            $(obj1).stop().animate({
                marginTop: 0
            },500);
        };
    });
  }
  Header.prototype.backTop = function(obj1){
    $(obj1).click(function(event) {
       $('body,html').animate({
          scrollTop: 0
        }, 800);
    });
  }
  $(function(){
    var header = new Header();
    header.sidebar1('#sidebar1',50,350);
    header.backTop('#backTop');
   });
});