电商网站JQuery浮动侧栏效果

web前端 8061 9 7年前 (2013-06-26)

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

mark 很优秀

chenmo
chenmo
6年前 (2014-11-08)

我测试了一下,怎么没效果,有演示页面看吗?

拓源网 回复:
需要先引入jQuery才行。
6年前 (2014-11-10)
拓源网 回复:
需要先引入jQuery才行。
5年前 (2015-08-24)
拓源网 回复:
需要先引入jQuery才行。
4年前 (2016-12-13)
拓源网 回复:
需要先引入jQuery才行。
3年前 (2017-02-24)
chenmo
chenmo
5年前 (2015-08-24)

我测试了一下,怎么没效果,有演示页面看吗?

chenmo
chenmo
4年前 (2016-12-13)

我测试了一下,怎么没效果,有演示页面看吗?

chenmo
chenmo
3年前 (2017-02-24)

我测试了一下,怎么没效果,有演示页面看吗?

发表评论

访客

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