滚动窗口js

最新推荐文章于 2024-05-31 23:45:01 发布

最新推荐文章于 2024-05-31 23:45:01 发布 · 138 阅读

文章标签：

#javascript #ViewUI

学习资料(部分转载) 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的浮动提示窗口方法。通过监测滚动条位置，动态调整提示窗口的位置，确保其始终处于可见区域内。适用于需要固定提示信息或广告的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script type="text/javascript">

var tips;
var theTop = 5/*这是默认高度,越大越往下*/; 
var old = theTop;
var pos;
function initFloatTips() {
  tips = document.getElementById('floatTips');

  moveTips();
};
function moveTips() {
  var tt=5000;
  //alert("dE = " + document.documentElement.scrollTop);
  //alert('bE = ' +  document.body.scrollTop);
   if (document.documentElement && document.documentElement.scrollTop) {
    pos = document.documentElement.scrollTop

  }
  else if (document.body) {
    pos = document.body.scrollTop;
  }else  if (window.innerHeight) {
    pos = window.pageYOffset
  }
  pos=pos-getTop(tips)+theTop;
  pos=getTop(tips)+pos/10;
  if (pos < theTop) pos = theTop;
  if (pos != old) {
    tips.style.top = pos+"px";
    //tt=0;
  }
  old = pos;
  setTimeout(moveTips,tt);
}
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}


</script>