位置：广州松河 > 技术支持 > JS 在线客服在下拉后动态归位特效_js/jQuery

JS 在线客服在下拉后动态归位特效_js/jQuery

来源：网络整理时间：2023/3/4 1:04:44 共 3619 浏览

如图，在线客服可以在下拉的时候动态归位，而不是直接使用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();

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

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：JS 收藏本站设置首页特效代码_js/jQuery | ·下一条：使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）_CSS学习