onscroll事件问题

takeshe 2008-10-17 07:56:01
function window_onscroll() {
du.style.top=document.body.scrollTop+100;
du.style.left=document.body.scrollLeft;
}
<body onscroll="window_onscroll()">
<a id="du" href="http://baidu.com" style="left: 0px; position: absolute; top: 100px">百度</a>
我想实现链接不随浏览器滚动滚动而改变位置,就是说让链接在绝对的位置！我上面的代码有错吗？
...全文
2316 15 打赏 收藏 转发到动态 举报
写回复
用AI写文章
15 条回复
切换为时间正序
请发表友善的回复…
发表回复
dadalovely 2008-10-18
  • 打赏
  • 举报
 回复
顶一下
seaer06 2008-10-18
  • 打赏
  • 举报
 回复
onscroll在IE中有用,有FF中没用,以前用的,失去信心了,把它删了.
takeshe 2008-10-18
  • 打赏
  • 举报
 回复
顶
xuyiazl 2008-10-18
  • 打赏
  • 举报
 回复
如果这世界没有IE6以及IE6以下版本是多么美好的事。


onscroll：当浏览器滚动条发生改变的时候，触发的事件。


分2种情况判断。

1.IE6版本
2.IE7以及firefox 等出名浏览器

在第2种情况，
首先得知，这种情况下 浏览器支持 position : fixed
那么做LZ想要的这种效果就很简单了。
代码如下：


<div id="divWatermark" style="position: fixed; top: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Watermark </div>


但是很郁闷的是，这个世界上有个IE叫IE6。

那么还必须考虑IE6

IE6不支持之前所说的position : fixed

这里也分2种需求：
1.将对象固定死。
2.还是LZ的需求。
第1种就不说了，去除滚动条overflow：hidden，操作完后恢复。
第2种：
如下代码，获取当前滚动条的高度以及页面的大小。


    var getPageScroll = function() {

        var xScroll, yScroll;

        if (self.pageYOffset) {

            yScroll = self.pageYOffset;

            xScroll = self.pageXOffset;

        } else if (document.documentElement && document.documentElement.scrollTop) {	 // Explorer 6 Strict

            yScroll = document.documentElement.scrollTop;

            xScroll = document.documentElement.scrollLeft;

        } else if (document.body) {// all other Explorers

            yScroll = document.body.scrollTop;

            xScroll = document.body.scrollLeft;	

        }

        return new Array(xScroll,yScroll) 

    }

    var getPageSize = function() {

        var windowHeight,windowWidth;        

        if (self.innerHeight) {	// all except Explorer

            windowHeight = self.innerHeight;

            windowWidth = self.innerWidth;

        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode

            windowHeight = document.documentElement.clientHeight;

            windowWidth = document.documentElement.clientWidth;

        } else if (document.body) { // other Explorers

            windowHeight = document.body.clientHeight;

            windowWidth = document.body.clientWidth;

        }	

        return new Array(windowWidth,windowHeight);

    }


实先准备好这2个方法。

好了。
开始，
第一步：绑定onscroll事件。
第二步：在onscroll事件中给对象定位，以达到想要的效果。
那么这种方法不太好。因为每次滚动条发生变化就触发。小心内存溢出。
melon23 2008-10-18
  • 打赏
  • 举报
 回复
找到原因了
可是怎么没有达到预期效果呢,输出document.body.scrollTop的值一看,一直都是0.原来是DTD的问题,要是页面直接用<html>开头的话就没有问题了.但是要符合web标准,DTD当然是不能少的.使用DTD时用document.documentElement.scrollTop代替document.body.scrollTop就可以了


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<script type="text/javascript">

window.onscroll = function () {

var oWatermark = document.getElementById("divWatermark");

oWatermark.style.top = document.documentElement.scrollTop+"px";



}

</script>

</head>

<body>

<p>Try scrolling this window. </p>

<div id="divWatermark" style="position: absolute; top:0;right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Watermark </div>

<p>Line 1 </p>

<p>Line 2 </p>

<p>Line 3 </p>

<p>Line 4 </p>

<p>Line 5 </p>

<p>Line 6 </p>

<p>Line 7 </p>

<p>Line 8 </p>

<p>Line 9 </p>

<p>Line 10 </p>

<p>Line 11 </p>

<p>Line 12 </p>

</body>

</html>
liuhelong 2008-10-18
  • 打赏
  • 举报
 回复

我晕

彩色的发错了，

删除TOP属性就OK了

~~!
liuhelong 2008-10-18
  • 打赏
  • 举报
 回复 
<html>

<head>

<title>OnScroll Example </title>

<script type="text/javascript">

window.onscroll = function () {

var oWatermark = document.getElementById("divWatermark");

oWatermark.style.top = document.body.scrollTop;

}

</script>

</head>

<body>

<p>Try scrolling this window. </p>

<div id="divWatermark" style="position: absolute; top: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Watermark </div>

<p>Line 1 </p>

<p>Line 2 </p>

<p>Line 3 </p>

<p>Line 4 </p>

<p>Line 5 </p>

<p>Line 6 </p>

<p>Line 7 </p>

<p>Line 8 </p>

<p>Line 9 </p>

<p>Line 10 </p>

<p>Line 11 </p>

<p>Line 12 </p>

</body>

</html>


试一下发代码的感觉（第一次）
melon23 2008-10-18
  • 打赏
  • 举报
 回复
我的可以用啊，你有没有漏啊var oWatermark = document.getElementById("divWatermark");
liuhelong 2008-10-18
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 melon23 的回复:]
HTML code可以用javascript实现例如：
<html>
<head>
<title>OnScroll Example </title>
<script type="text/javascript">
window.onscroll = function () {
var oWatermark = document.getElementById("divWatermark");
oWatermark.style.top = document.body.scrollTop;
}
</script>
</head>
<body>
<p>Try scrolling this window. </p>
<div id="divWatermark" style="position: absolute; top: 0px; right: 0px…
[/Quote]

不要设TOP
<html>
<head>
<title>OnScroll Example </title>
<script type="text/javascript">
window.onscroll = function () {
var oWatermark = document.getElementById("divWatermark");
oWatermark.style.top = document.body.scrollTop;
}
</script>
</head>
<body>
<p>Try scrolling this window. </p>
<div id="divWatermark" style="position: absolute; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Watermark </div>
<p>Line 1 </p>
<p>Line 2 </p>
<p>Line 3 </p>
<p>Line 4 </p>
<p>Line 5 </p>
<p>Line 6 </p>
<p>Line 7 </p>
<p>Line 8 </p>
<p>Line 9 </p>
<p>Line 10 </p>
<p>Line 11 </p>
<p>Line 12 </p>
</body>
</html>
takeshe 2008-10-18
  • 打赏
  • 举报
 回复
8楼代码的效果跟我本来代码一样的啊
melon23 2008-10-18
  • 打赏
  • 举报
 回复 
可以用javascript实现例如：

<html>

<head>

<title>OnScroll Example </title>

<script type="text/javascript">

window.onscroll = function () {

var oWatermark = document.getElementById("divWatermark");

oWatermark.style.top = document.body.scrollTop;

}

</script>

</head>

<body>

<p>Try scrolling this window. </p>

<div id="divWatermark" style="position: absolute; top: 0px; right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Watermark </div>

<p>Line 1 </p>

<p>Line 2 </p>

<p>Line 3 </p>

<p>Line 4 </p>

<p>Line 5 </p>

<p>Line 6 </p>

<p>Line 7 </p>

<p>Line 8 </p>

<p>Line 9 </p>

<p>Line 10 </p>

<p>Line 11 </p>

<p>Line 12 </p>

</body>

</html>
takeshe 2008-10-18
  • 打赏
  • 举报
 回复
没有会吗？高手帮帮我！
lutianling521 2008-10-18
  • 打赏
  • 举报
 回复
代码没问题！
takeshe 2008-10-17
  • 打赏
  • 举报
 回复
自己顶一下！
greatverve 2008-10-17
  • 打赏
  • 举报
 回复
好难的js.关注.
onscroll事件揭秘
onscroll事件揭秘
JavaScript触发onScroll事件的函数节流详解
的内容是说说最近在工作中遇到过的常见的问题。主要是关于JavaScript触发onScroll事件的函数节流，文中由一个常见的问题开始展开，一步步的介绍解决的方法，有需要的朋友们下面来跟着小编一起看看吧。
React.Js添加与删除onScroll事件的方法详解
主要给大家介绍了关于React.Js添加与删除onScroll事件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
js动态添加onload、onresize、onscroll事件(另类方法)
window 的 onload、onresize、onscroll 事件，跟其他的事件不一样，它不能用 attachEvent 或 addEventListener 来添加。也就是说，它只能这样来（以 onload 为例，下同）： 代码如下: [removed] = function() { // ...
关于onScroll事件在IE6下每次滚动触发三次bug说明
这里有一个人和我一样的情况 ...但帖子内有人测试又没问题，我测试的IE6是windows 2003下的，不...解决办法是用一个全局变量来限制触发的3次事件只执行一次，200ms后再将该变量复位即可。 这个问题比较罕见，特此记录一下
.NET社区

62,074

社区成员

669,028

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章