Effect of JQuery floating sidebar on e-commerce website

Nowadays, more and more e-commerce websites have added floating sidebars to display floor selling points, such as Jingdong, No.1 Store, Jumeiyoupin, Dangdang and other well-known websites. Adding floating sidebars can better realize user interaction, which is also simple to achieve. Please duplicate the following code for specific effects.

CSS part:

 .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 section:

You need to introduce JQuery first, you know.

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

HTML part:

 <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>