js实现页面滚动，菜单固定

相信大家都遇到过滚动页面需要固定某些内容不跟随页面滚动而滚动的情况，以往项目中也比较多，一直没有分享，今天刚好有空，来做个小分享。

项目需求：

页面处于顶部时右侧“在线客服”静止不动

当页面往下滚动，右侧在线客服悬浮于顶部

页面滚动至最大高度时，右侧在线客服与左侧内容底部对齐，相对静止

思路：
页面处于顶部时只需右浮动即可，滚动超过本身高度时设置fixed使元素块可以固定悬浮于浏览器窗口顶部，当滚动至左侧内容最大高度时设置absolute使相对左侧内容静止

好了，我们看看具体代码吧。
HTML

<div class="proinfo clearfix">
    <div class="infoDelita">......</div>

    <div class="slidebar">
      <div class="service">
          <div class="ti">——  咨询在线客服  ——</div>
          ......
           </div>
    </div>
</div>

CSS

.products .proinfo{ margin-top:30px; position:relative;}
.proinfo .infoDelita{ width:900px; float:left;}
.proinfo .slidebar{ width:295px; float:right;}

.proinfo .service{ width:275px; background-color:#fff; padding:25px 0 38px 20px;}
.proinfo .service .ti{ text-align:center; color:#333; font-size:18px;}
.........
/*在线客服相对固定设置*/
.proinfo .SerFix{ position:fixed; top:0; z-index:100;}
.proinfo .SerAbs{ position:absolute; bottom:0;}

JS

var fdiv = $(".proinfo .service");
var itop = fdiv.offset().top;

window.onload = function(){
  $(window).scroll( function() {
        var top = $(window).scrollTop();

        if(top >= itop){
           fdiv.addClass("SerFix");

           if(top >= $(".products .MayaLike").offset().top - 40 - $(window).height()){
              fdiv.removeClass("SerFix").addClass("SerAbs");
           } else{
              fdiv.removeClass("SerAbs");
           }
        } else{
           fdiv.removeClass("SerFix");
        }
    });
}

tips：
$(“.products .MayaLike”).offset().top - 40 是左侧内容下面的内容的相对高度。 如下图所示：