侧边栏滚动跟随

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');
   });
});