本来想写一下,电子商务网站需要注意的几个问题的,时间太晚了,这几天也忒忙,国外的电商网站真的不好搞,比国内的要复杂的多,他们考虑的问题太多,细节上的东西想的真是太细太细,网站还没有推出,还没有得到用户的反馈,就有这么多的问题,太有压力,下面分享一个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

相关笔记

更多