在线客服侧栏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>图标：
