现PC端页面有个需求是,右侧有一个导航栏目,要求鼠标下滑到一定程度,出现返回顶部的按钮:
<div class="toolbar">
<ul>
<li>
<span class="iconfont icon-zl_kefu"></span>
<p class="customer_service">客服</p>
</li>
<li class="Phone">
<span class="iconfont icon-zl_dianxun"></span>
<p style=" 130px;padding-left: 4px;text-align: left;">400-888-8906</p>
</li>
<li class="Qrcode">
<span class="iconfont icon-zl_erweima"></span>
<p class="qrcode">
<img src="/www/xgwy/img/weixin_qrcode.png" alt="UIOT超级智慧家微信公众号"/>
<a>请扫码关注</a>
</p>
</li>
<li class="return">
<span class="iconfont icon-zl_zhiding"></span>
</li>
</ul>
</div>
<script type="text/javascript">
//滑动高度监测
var scrollTop;
var timer = null;
//监测当前屏幕高度
window.onscroll = function() {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return scrollTop;
}
//点击返回顶部
$('.return').click(function(){
clearInterval(timer);
timer = setInterval(function() {
var now = scrollTop;
var speed = (0 - now) / 10;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(scrollTop == 0) {
clearInterval(timer);
}
document.documentElement.scrollTop = scrollTop + speed;
document.body.scrollTop = scrollTop + speed;
}, 35)
});
//菜单栏吸附
$().ready(function() {
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(); //获取当前滑动的位置
if(scrollTop > 500) {
$('.toolbar').addClass('block');
$('.return').addClass('block');
}else{
$('.toolbar').removeClass('block');
$('.return').removeClass('block');
}
})
});
// 点击跳转到商务通客服
$(".customer_service").on('click', function () {
window.open("${commerceUrl!}");
})
</script>
样式控制为:
/*右侧导航栏*/
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot');
src:url('../fonts/icomoon.eot')format('embedded-opentype'),
url('../fonts/icomoon.ttf')format('truetype'),
url('../fonts/icomoon.woff')format('woff'),
url('../fonts/icomoon.svg')format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
.iconfont {
font-family: "icomoon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-zl_dianxun:before {
content: "e900";
font-size: 22px;
}
.icon-zl_erweima:before {
content: "e901";
font-size: 24px;
}
.icon-zl_kefu:before {
content: "e902";
font-size: 26px;
}
.icon-zl_weibo:before {
content: "e903";
}
.icon-zl_weixin:before {
content: "e904";
}
.icon-zl_zhiding:before {
content: "e905";
}
.toolbar{
position: fixed;
top: 600px;
right: 45px;
z-index: 999;
100px;
height: 100%;
}
.toolbar ul{
color: #fff;
overflow: hidden;
font-size: 13px;
text-align: center;
display: block;
40px;
padding-left: 100px;
min-height: 160px;
}
.toolbar ul li{
cursor: pointer;
height: 40px;
40px;
line-height: 40px;
background-color: #000000;
position: relative;
}
.toolbar ul li:hover span,.toolbar ul li:hover p{
background-color: #1468D5;
}
.toolbar ul li:hover p{
animation: lell linear forwards 0.5s;
}
.toolbar ul li.Qrcode:hover p{
animation: lells linear forwards 0.5s;
}
.toolbar ul li.Phone:hover p{
animation: lellc linear forwards 0.5s;
}
.toolbar ul li:last-child{
margin-top: 8px;
}
@keyframes lell{
from{left: 40px;}
to{left: -60px;}
}
@keyframes lells{
from{left: 60px;}
to{left: -80px;top: -25px;}
}
@keyframes lellc{
from{left: 60px;}
to{left: -100px;}
}
.toolbar ul li span{
display: block;
40px;
height: 40px;
position: absolute;
left: 0;
top: 0;
z-index: 99;
background-color: #000;
}
.toolbar ul li p{
position: absolute;
left: 40px;
top: 0;
60px;
height: 40px;
color: #fff;
font-size: 13px;
text-align: center;
background-color: #000;
z-index: 90;
}
.toolbar ul li p.qrcode{
height: 90px;
80px;
padding-top: 5px;
position: absolute;
right: 0;
top: -25px;
}
.toolbar ul li p.qrcode img{
70px;
height: 70px;
}
.toolbar ul li p.qrcode a{
font-size: 12px;
display: block;
line-height: 18px;
color: #fff;
text-decoration: none;
}
.return{
display: none;
}
.hide{
display: none;
}
.block{
display: block;
}
.col3{
color: #333333;
}