电商网站JQuery浮动侧栏效果

现如今，越来越多的电商网站都加入了浮动侧栏来展示楼层卖点，比如京东、1号店、聚美优品、当当等知名网站，增加浮动侧边栏可以更好的实现用户交互，实现起来也很简单，具体效果请复制以下代码。

CSS部分：

.floatnav { 
background:#b83f44; 
-webkit-transform:scale(0.01,0.01); 
-moz-transform:scale(0.01,0.01); 
-o-transform:scale(0.01,0.01); 
-ms-transform:scale(0.01,0.01); 
transform:scale(0.01,0.01); 
-webkit-transition:all 400ms linear 0; 
-moz-transition:all 400ms linear 0; 
-o-transition:all 400ms linear 0; 
-ms-transition:all 400ms linear 0; 
transition:all 400ms linear 0; 
visibility:hidden; 
_display:none; 
overflow:hidden; 
} 
.floatshow { 
visibility:visible; 
_display:block; 
-webkit-transform:scale(1); 
-moz-transform:scale(1); 
-o-transform:scale(1)); 
-ms-transform:scale(1); 
transform:scale(1); 
} 
.weixin {  
width:122px;height:538px;position: fixed;*position: absolute; 
top:150px; 
_top:expression(eval(150+document.documentElement.scrollTop)); 
left:49%; 
margin-left:-610px; 
} 
* { margin:0; padding:0; } 
body { margin:0; padding:0; } 
.wrapper { width:100%; overflow:hidden; } 
.header { width:100%; height:200px; background:#ccc; } 
.box { width:980px; margin:0 auto; background:#eee; } 
.main { width:100%; height:3000px; background:#999; } 
.footer { width:100%; height:50px; background:#ccc; overflow:hidden; }

JQuery部分：

需要先引入JQuery，你懂的。

$(function(){ 
        var main_top  =  $("#main").offset().top; 
        $(window).scroll(function(){ 
           if($(window).scrollTop() > main_top){ 
              $(".floatnav").addClass("floatshow"); 
           }else{ 
              $(".floatnav").removeClass("floatshow"); 
             } 
        }) 
});

HTML部分：

<div class="wrapper"> 
    <div class="header"></div> 
    <div class="box"> 
        <div class="main" id="main"> 
            <div class="floatnav weixin"></div> 
        </div> 
    </div> 
    <div class="footer"></div> 
</div>