如图,在线客服可以在下拉的时候动态归位,而不是直接使用positiong直接固定在侧边,今天来分享下JS代码,偶也是摘录而已!
HTML:
<divclass="ydwpkefu"id="divQQbox"> <divclass="title">客服可以在下拉的时候动态归位</div> <divclass="kfcontent">客服内容</div> </div>
CSS:
.ydwpkefu{Z-INDEX:99;right:2px;position:absolute;top:140px;}
JS:
//<![CDATA[ vartips;vartheTop=100/*这是默认高度,越大越往下*/; varold=theTop; functioninitFloatTips(){ tips=document.getElementById('divQQbox'); moveTips(); }; functionmoveTips(){ vartt=50; if(window.innerHeight){ pos=window.pageYOffset } elseif(document.documentElement&&document.documentElement.scrollTop){ pos=document.documentElement.scrollTop } elseif(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();
动态效果对于企业站来说,还是挺能吸引访客眼球的,下拉时被眼球忽略的可能性比较低!