在线客服侧栏html
效果
代码
<style> /* 在线客服 */ .right_nav{ position: fixed; right:15px; bottom: 30%; } .right_nav .main{ background:#fff; padding: 6px 0; border-radius:22px; box-shadow: 0 0 10px rgba(0,0,0,0.1); -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } .right_nav .main .item{ width:48px; opacity:0.8; height:48px; cursor:pointer; position:relative; display:flex; justify-content:center; align-items:center; } .right_nav .main .item:before{ content:''; width:70%; margin:0 15%; height:1px; background:#eee; position:absolute; top:0px; } .right_nav .main .item:first-child:before{ display:none; } .right_nav .main .item:hover{ opacity:1; } .right_nav .main .icon img{ height:24px; display:block; margin:0 auto; } .right_nav .topIcon{ margin-bottom:15px; } .right_nav .topIcon .item{ height:48px; width:48px; position:relative; display:flex; align-items:center; justify-content:center; box-shadow: 0 0 10px rgba(0,0,0,0.1); border-radius:50%; background:#e60012; cursor:pointer; } .right_nav .topIcon .icon img{ height:24px; display:block; } .right_nav .showBox{ position:absolute; top:0%; right:120%; white-space: nowrap; overflow: auto; visibility:hidden; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; opacity:0; } .right_nav .showBox .content{ background:rgba(0,0,0,0.7); color:#fff; border-radius:5px; padding:10px; margin-right:12px; margin-top:2px; } .right_nav .item .arrow{ position:absolute; top:50%; right:48px; width:0px; height: 0px; margin-top:-4px; margin-right:12px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #000; transform:rotate(90deg); opacity:0; visibility:hidden; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease; } .right_nav .item:hover .showBox { visibility:visible; opacity:1; right:100%; } .right_nav .item:hover .arrow { visibility:visible; opacity:0.7; margin-right:0px; } @media screen and (max-width:768px){ .right_nav{ display:none; } } </style> <div class="right_nav"> <div class="topIcon"> <div class="item"> <a href="/"><div class="icon"><img src="/tpl/default/skin/img/kf-icon.png" /></div></a> <div class="showBox"> <div class="content">联系客服</div> </div> <div class="arrow"></div> </div> </div> <div class="main"> <div class="item"> <div class="icon"><img src="/tpl/default/skin/img/ewm-icon.png" /></div> <div class="showBox"> <div class="content"> <img src="/tpl/default/skin/img/qrCode.png" /> </div> </div> <div class="arrow"></div> </div> <div class="item"> <div class="icon"><img src="/tpl/default/skin/img/fz-icon.png" /></div> <div class="showBox"> <div class="content">复制页面链接</div> </div> <div class="arrow"></div> </div> <div class="item got"> <div class="icon"><img src="/tpl/default/skin/img/fhdb-icon.png" /></div> <div class="showBox"> <div class="content">反回顶部</div> </div> <div class="arrow"></div> </div> </div> </div> <script> //返回顶部 $(".right_nav .got").click(function (){ $("html,body").animate({scrollTop:"0px"},'600'); }) $(window).scroll(function(){ if($(window).scrollTop()>300){ $(".right_nav .got").fadeIn(); }else{ $(".right_nav .got").fadeOut(); } }); </script>
图标: