电商网站JQuery浮动侧栏效果

web前端789197年前

现如今,越来越多的电商网站都加入了浮动侧栏来展示楼层卖点,比如京东、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>