用JS实现网页浮动窗口随窗口滚动（类似于客服窗口）

来源：互联网发布：java实现ftp下载文件编辑：程序博客网时间：2024/05/23 17:00

这几天做网页，遇到一个JS问题，在首页就是实现一个小窗口，能随窗体滚动滚动，并且还要动态的。本人对JS不是很精通，经过一番苦研，现在把自己的随心所得写下来，同各位博友分享：

首先想到的是用JS来实现：

[css] view plaincopyprint?

.gmn_cart {
width: 130px;
z-index: 1;
right: 5px;
visibility: visible;
position:fixed;
top: 120px;
border: 1px solid #7CBB12;
}

.gmn_cart {width: 130px;z-index: 1;right: 5px;visibility: visible;position:fixed;top: 120px;border: 1px solid #7CBB12;}

这样讲position的值设置为fixed，在FireFox和chrome里确实实现绝对定位，并随着窗体滚动始终呆在一个位置，这样写的缺点是：

1，在IE浏览器中支持不太好，尤其是在IE6，

2，没有动态效果。

所以只能使用JS来动态根据scroll高度改变div的top属性，实现方法：

1，首先将上面css里的position值改为absolute,

2,添加下面代码：

[html] view plaincopyprint?

var fm=document.getElementById("gmn_cart");
function moveCart(){
var hy = (document.documentElement.scrollTop || document.body.scrollTop)+120;
fm.style.top = hy+'px';
}
setInterval(moveCart(),30);

var fm=document.getElementById("gmn_cart");function moveCart(){var hy = (document.documentElement.scrollTop || document.body.scrollTop)+120;fm.style.top = hy+'px';}setInterval(moveCart(),30);

首先获得scrollTop，前面document.documentElement.scrollTop在IE浏览器中获取scroll方式，后者document.body.scrollTop是再其他浏览器中得用法。然后利用fm.style.top改变top的值。在这里需要叙述一下，因为浏览器的差异，fm.style.top = hy+'px';后面的+'px'一定要带上，如果不带的话，在IE中能识别，但是在其他浏览其中不能识别具体高度。然后设置一个定时函数，每隔30毫秒执行判断一次。但是这样在页面里设置一个定时的函数，老不大放心，感觉不好，（不知道为什么，还请高人指点。。），下面是加上Jquery后的写法：

[javascript] view plaincopyprint?

var fm=document.getElementById("gmn_cart");
$(document).ready(function() {
$(window).scroll(function(){
$(".gmn_cart").stop();
$(".gmn_cart").animate({top:(document.documentElement.scrollTop || document.body.scrollTop)+120},100);
});
});

    var fm=document.getElementById("gmn_cart");$(document).ready(function() {$(window).scroll(function(){$(".gmn_cart").stop();$(".gmn_cart").animate({top:(document.documentElement.scrollTop || document.body.scrollTop)+120},100);});});

这样一切OK，并且滑动效果也好。。。。。一开始没加

[javascript] view plaincopyprint?

$(".gmn_cart").stop();

$(".gmn_cart").stop();

导致，在IE浏览器中滑动非常缓慢。。。原来是，窗体滚动是触发了好几次，所以也就触发了多次animate函数，多个线程同时抢占同一资源，势必会造成线程阻塞，这样在前面加上一个stop不管有没有在动先停止了再说，保证只有一个线程在执行。如此看来，JS的确蕴含很多知识啊。。。。膜拜中。