当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

javascript实现div跟随滚动条移动

发表于: 2011-03-03   作者:bsr1983   来源:转载   浏览次数:
摘要:         实现过程中遇到的主要问题有两点          首先要解决的是在不同浏览器下获取ScrollTop值的问题,采取的方法是:        &nbs

        实现过程中遇到的主要问题有两点 

        首先要解决的是在不同浏览器下获取ScrollTop值的问题,采取的方法是:

         var scrollTop = window.pageYOffset  || document.documentElement.scrollTop || document.body.scrollTop||0;

             需要注意的是在HTML文件首部要包含DTD声明:

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

         接着是window.setInterval();函数体要放在setInterval中,否则firefox及chrome浏览器下执行会有问题;

         最终的代码为:

        

window.setInterval(function moveWithScroll()
   {
	  var scrollDiv=document.getElementById('scrollDiv');
	  var w=document.documentElement.clientWidth;
	  var h=document.documentElement.clientHeight;
	  var ow=scrollDiv.style.width;
	  var oh=scrollDiv.style.height;
	  var scrollTop = window.pageYOffset  || document.documentElement.scrollTop || document.body.scrollTop||0;
	  var nowW=(w-parseInt(ow))/2;
	  var nowH=(scrollTop+h-parseInt(oh))-400/2;
	  scrollDiv.style.left=nowW+"px";
	  scrollDiv.style.top=nowH+"px";	  
   },50);

scrollDiv为要滚动的div的ID

 

 

 

 

 

javascript实现div跟随滚动条移动

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
今天下午有时间阅读【汤姆大叔的博客】,发现他的博客风格的确很专业,说起来也真惭愧啊,我现在终
  IE7真的是很古怪,开发新功能总会由于IE7和Jquery提供方法不兼容伤脑筋。   Jquery提供工作区
  今天下午有时间阅读【汤姆大叔的博客】,发现他的博客风格的确很专业,说起来也真惭愧啊,我现
看着一些表格带那些鼠标移动过去的时候会触发tr的背景颜色发生变化,当你单击某一行时,它还能以高
前面给大家分享过 一款基于jquery ui漂亮的可拖动div实例,今天给大家分享一款基于TweenMax跟随鼠标
原来用过,没有太在意,最近又用到。记下方便以后用。 <div style='border:0px;padding:3px; PAD
JS框架使用Jquery 最终效果: 代码结构: 代码: <HEAD><TITLE>new document</TITLE
JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别---- pageX,p
效果图 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/x
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号