淘先锋技术网

首页 1 2 3 4 5 6 7

 GIF.gif

如图,在线客服可以在下拉的时候动态归位,而不是直接使用positiong直接固定在侧边,今天来分享下JS代码,我也是摘录而已!

HTML:

<div class="ydwpkefu" id="divQQbox">
 <div class="title">客服可以在下拉的时候动态归位</div>
 <div class="kfcontent">客服内容</div>
</div>

CSS:

.ydwpkefu{Z-INDEX: 99; right: 2px; position: absolute; top: 140px;}

JS:

//<![CDATA[
var tips; var theTop = 100/*这是默认高度,越大越往下*/; 
var old = theTop;
function initFloatTips() {
tips = document.getElementById('divQQbox');
moveTips();
};
function moveTips() {
var tt=50;
if (window.innerHeight) {
pos = window.pageYOffset
}
else if (document.documentElement && document.documentElement.scrollTop) {
pos = document.documentElement.scrollTop
}
else if (document.body) {
pos = document.body.scrollTop;
}
pos=pos-tips.offsetTop+theTop;
pos=tips.offsetTop+pos/10;
if (pos < theTop) pos = theTop;
if (pos != old) {
tips.style.top = pos+"px";
tt=10;
//alert(tips.style.top);
}
old = pos;
setTimeout(moveTips,tt);
}
//!]]>
initFloatTips();

动态效果对于企业站来说,还是挺能吸引访客眼球的,下拉时被眼球忽略的可能性比较低!