Effect of JQuery floating sidebar on e-commerce website
.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; }
$(function(){ var main_top = $("#main").offset().top; $(window).scroll(function(){ if($(window).scrollTop() > main_top){ $(".floatnav").addClass("floatshow"); }else{ $(".floatnav").removeClass("floatshow"); } }) });
<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>