电商网站JQuery浮动侧栏效果

web前端792797年前

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

评论列表

夜无良寐
夜无良寐 评论于 7年前回复该评论
mark 很优秀
chenmo
chenmo 评论于 6年前回复该评论
我测试了一下,怎么没效果,有演示页面看吗?
拓源网
拓源网 评论于 6年前回复该评论
需要先引入jQuery才行。
拓源网
拓源网 评论于 5年前回复该评论
需要先引入jQuery才行。
拓源网
拓源网 评论于 4年前回复该评论
需要先引入jQuery才行。
拓源网
拓源网 评论于 3年前回复该评论
需要先引入jQuery才行。
chenmo
chenmo 评论于 5年前回复该评论
我测试了一下,怎么没效果,有演示页面看吗?
chenmo
chenmo 评论于 4年前回复该评论
我测试了一下,怎么没效果,有演示页面看吗?
chenmo
chenmo 评论于 3年前回复该评论
我测试了一下,怎么没效果,有演示页面看吗?

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。