本来想写一下，电子商务网站需要注意的几个问题的，时间太晚了，这几天也忒忙，国外的电商网站真的不好搞，比国内的要复杂的多，他们考虑的问题太多，细节上的东西想的真是太细太细，网站还没有推出，还没有得到用户的反馈，就有这么多的问题，太有压力，下面分享一个DIV随屏幕滚动JS代码：
JS部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

var tips; var theTop = 250/*这是默认高度*/; var old = theTop;
function initFloatTips() {
   tips = document.getElementById('floatTips');
   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;
   }
   old = pos;
   setTimeout(moveTips,tt);
}
 
$(document).ready(function(){
initFloatTips();
})

DIV的ID命名要和JS中的相对应，下面是CSS样式，大家可以自己按需要定义：

1
2
3
4
5
6
7

div#floatTips{
position:absolute;
padding:3px;
bottom:0px;
right:0px;
z-index:9999;
}

自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com

本文链接地址: DIV随屏幕滚动JS代码 http://www.chhua.com/web-note2492

相关笔记

更多