`
bsr1983
  • 浏览: 1117364 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript实现div跟随滚动条移动

JavaScriptChromeFirefox浏览器XHTML 
阅读更多

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

        首先要解决的是在不同浏览器下获取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

 

 

 

 

 

分享到：
| VC 6.0 打开文件报内存错误的解决办法
评论
1 楼 SaiAren 2012-01-12  
...测试无效... 不跟随
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div随滚动条上下滚动

    在网页设计中，"div随滚动条上下滚动"是一种常见的动态效果，通常用于实现固定定位或者跟随滚动的视觉效果。这种效果可以通过JavaScript库jQuery和原生JavaScript来实现，以增加用户体验，使某些元素如导航栏、侧...

    Jquery跟随滚动条移动的div动画效果

    "Jquery跟随滚动条移动的div动画效果"就是一个典型的例子，它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效，而且这个div在移动过程中保持平滑，避免了闪烁现象，提升了用户体验。 首先，...

    浮动广告，跟随滚动条移动的源码

    HTML用于构建广告的基本结构，CSS用来设置样式，包括位置、大小、颜色等，而JavaScript则是实现广告动态跟随滚动的关键。 在HTML部分，通常会创建一个包含广告内容的div元素，并为其添加特定的类名或ID，以便于在...

    基于JavaScript实现div层跟随滚动条滑动

    项目需求是这样的：在一个页面放2个悬浮框，悬浮框随页面的上下滚动有上下波动的效果，最终固定在同一位置，下面通过本文给大家分享基于JavaScript实现div层跟随滚动条滑动的相关资料，对js div跟随滚动条滑动相关...

    用CSS实现跟随滚动条漂浮层代码

    总的来说，CSS的`position`属性是实现跟随滚动条漂浮层的关键。通过巧妙地设置`top`、`bottom`、`left`和`right`属性，你可以自由地定制漂浮层在页面上的位置，为用户提供更流畅的浏览体验。在实际项目中，可以结合...

    层随滚动条移动

    本文介绍了如何通过JavaScript实现层跟随滚动条移动的技术方案，包括关键的浏览器兼容性处理、元素定位方法、滚动事件监听以及页面高度与元素尺寸的计算等核心要素。该技术不仅可以提升用户体验，还能增加网站的互动...

    不随滚动条滚动而滚动的浮动效果

    浮动效果可以使得网页元素在浏览器窗口中固定不动，或者跟随滚动条的滚动而移动。本篇文章将介绍如何实现不随滚动条滚动而滚动的浮动效果，也就是说，即使滚动条滚动，浮动元素也会固定在浏览器窗口的某个位置不变。...

    JQuery 随鼠标滚动条滚动的div

    标题中的“JQuery 随鼠标滚动条滚动的div”是指使用JQuery库来实现一个功能，即当用户滚动页面时，某个特定的div元素会跟随滚动条一起移动。这个功能在网页设计中常见于侧边栏菜单、广告条或者固定导航栏等，目的是...

    div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动

    在网页设计中，"div跟随固定在浏览器左边，上下不浮动，左右可跟随主体浮动"是一种常见的布局技巧，主要用于创建侧边栏或者导航菜单。这种布局模式可以使元素在页面滚动时始终保持在用户视野的左侧，提供持续的导航...

    javascript简单实现跟随滚动条漂浮的返回顶部按钮效果

    JavaScript实现跟随滚动条漂浮的返回顶部按钮效果知识点解析： 一、背景介绍： 在网页设计中，当页面内容很长，超出了用户的显示区域时，为了提升用户体验，常常会设计一个返回页面顶部的按钮。随着用户滚动页面，...

    通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位

    本文将介绍如何使用JQuery实现div滚动条的自动定位。 首先，我们需要了解JQuery的基础知识。JQuery是一个快速、简洁的JavaScript库，它通过简化HTML文档遍历和事件处理、动画和Ajax交互，使得Web开发变得更加方便和...

    前端实现鼠标跟随动画

    以上五种方法分别展示了如何利用CSS3、JavaScript基础、Vue指令、Vue组件以及Vue结合CSS Animation来实现鼠标跟随动画。每种方法都有其适用场景和优缺点，开发者可以根据项目需求选择合适的方式。在实际应用中，你还...

    根据滚动条移动的多层浮动效果，实现页面广告效果。

    同时，我们可以使用JavaScript来改变元素的位置，使其跟随滚动条移动。例如： ```css .floating-ad { position: fixed; top: 0; /* 初始位置 */ width: 200px; /* 自定义宽度 */ height: 200px; /* 自定义高度 ...

    jQuery控制div实现随滚动条滚动效果

    jQuery控制div实现随滚动条滚动效果是Web前端开发中常见的一个功能，涉及到了JavaScript事件处理、动画制作等技术点。通过对这些技术的掌握和应用，可以增加页面的互动性和用户的体验感。实现这一效果的方法不止一种...

    全屏焦点图片无滚动条 css3动画特效 图片随鼠标移动而移动

    在本项目中，我们主要探讨的是如何利用CSS3和HTML5技术实现一个全屏焦点图片展示效果，其中图片能够随着鼠标的移动而平滑地移动，同时无滚动条设计使得用户体验更加流畅。以下是对这个主题的详细解释： 一、全屏...

    javascript实现滚动条效果

    JavaScript 实现滚动条效果主要涉及对DOM元素的样式操作、事件监听以及动态计算。下面将详细解释这个实例中的关键知识点： 1. **HTML结构**： 示例中的HTML包含一个`&lt;div&gt;`元素（id为"container"），内部有一个...

    【JavaScript源代码】javascript实现简单滚动窗口.docx

    - 利用CSS和JavaScript创建居中弹出层并使其跟随滚动条。 - 获取窗口的宽高、鼠标位置以及滚动条信息。 - 使用DIV模拟弹出窗口，并使其在页面滚动时保持可见。 总的来说，JavaScript的滚动窗口实现涉及了浏览器窗口...

    不随滚动条滚动的模式窗口

    在网页设计和开发中，"不随滚动条滚动的模式窗口"是一种常见的用户体验设计技术，它允许用户在当前页面上打开一个全屏或半屏的弹出窗口，而这个窗口不会随着页面的滚动条移动。这种效果常用于图片预览、表单填写、...

    jQuery实现div浮动层跟随页面滚动效果

    同时，还需要引入 `jquery.cookie.js` 和 `jquery.scroll-follow.js` 这两个插件，前者用于处理cookie，后者则是实现跟随滚动功能的核心。 在JavaScript部分，我们使用jQuery的 `$()` 函数在文档加载完成后执行代码...

    JavaScript实现跟随滚动缓冲运动广告框

    JavaScript 实现跟随滚动缓冲运动广告框是一种常见的网页交互效果，常用于吸引用户的注意力。这种技术主要是通过 JavaScript 来监听窗口的滚动事件，并根据滚动位置动态调整广告框的位置，使其始终保持在用户视野...

Magicbox
Global site tag (gtag.js) - Google Analytics