如图,在线客服可以在下拉的时候动态归位,而不是直接使用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();
动态效果对于企业站来说,还是挺能吸引访客眼球的,下拉时被眼球忽略的可能性比较低!