jquery控制div随滚动条滚动效果

最新推荐文章于 2021-11-17 10:48:54 发布
最新推荐文章于 2021-11-17 10:48:54 发布
阅读量887 收藏
点赞数
分类专栏： # jquery 文章标签： js
[html]  view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head>  
  3.     <title>jquery div随滚动条滚动效果</title>  
  4.     <script src="../js/jquery-1.11.1.min.js" type="text/javascript"></script>  
  5.     <script type="text/javascript">  
  6.         $(function () {  
  7.             $(window).scroll(function () {  
  8.                 var top = $(window).scrollTop() + 200;  
  9.                 var left = $(window).scrollLeft() + 320;  
  10.                 $("#editInfo").animate({ "top": top }, 30);  //方式一  效果比较理想  
  11.                 //$("#editInfo").css({ left: left + "px", top: top + "px" });  方式二 有阴影  
  12.             });  
  13.         });   
  14.     </script>  
  15. </head>  
  16. <body>  
  17.     <div id="editInfo" style="float:left;width:300px; height:200px; background-color:#a10000;position:absolute;top:200px;"></div>  
  18.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  19.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  20.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  21.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  22.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  23.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  24.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  25.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  26.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  27.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  28.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  29.     <br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br /><br/><br />  
  30. </body>  
  31. </html>  
zheng963
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery控制div实现随滚动条滚动效果
10-22
主要介绍了jQuery控制div实现随滚动条滚动效果,对比分析了两种实现方法供大家参考选择,需要的朋友可以参考下
jquery实现div跟着滚动条滚动滚，不要根据浏览器窗口定位，根据body定位
QDY5945的博客
10-01 222
<div id="test" style="position:absolute"></div> $(document).ready(function(){ var menu...
jquerydiv随着滚动条的滚动而滚动
bigfatDone的博客
07-27 2922
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;   &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;   &lt;head&gt;   ..
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
12-10
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置，方便自动定位。 代码如下: var container = $(‘div’), scrollTo = $(‘#row_8’); container.scrollTop( scrollTo.offset().top – container.offset().top + container.scrollTop() ); // Or you can animate the scrolling: container.animate({ scrollTop: scrollTo.offset().top – container.offset()
JQ实现将div的滚动条滚动到指定子元素所在的位置
weixin_45734686的博客
11-17 805
function scrollLocation(fater, scrollTo) { // fater.scrollTop( // scrollTo.offset().top - fater.offset().top + fater.scrollTop() // ); // Or you can animate the scrolling: fater.animate({ scrollTop: scrollTo.offset().top -.
[jQuery]获取div滚动条位置
Balmunc的专栏
10-10 607
$('div').scrollTop()
基于jquery的DIV随滚动条滚动而滚动的代码
12-09
核心代码： 代码如下: [removed][removed] [removed] $(function() { $(window).scroll(function() { var top = $(window).scrollTop()+200; var left= $(window).scrollLeft()+320; $(“#editInfo”).css({ left:...
jQuery判断div随滚动条滚动到一定位置后停止
10-26
主要介绍了jQuery判断div随滚动条滚动到一定位置后停止的方法,需要的朋友可以参考下
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
05-06
IEC 60364-7-722-2018 低压电气装置.第7-722部分：特殊装置或场所的要求.电动车辆的电源.pdf
eNSP软件安装及拓扑结构搭建.docx
05-06
、eNSP的安装 1．安装eNSP之前必须先安装以下三个插件： VirtualBox WinPcap Wireshack eNSP作为模拟器主体，需要对应版本的VirtualBox和WinPcap提供虚拟环境，Wireshack用于实验当中测试抓取数据包使用。 安装好这三个插件，只需要点下一步选择好对应的安装位置即可，然后就可以安装eNSP软件了。 eNSP的页面
vmware虚拟机安装教程
05-06
附件是vmware虚拟机安装教程，文件绿色安全，请大家放心下载，仅供交流学习使用，无任何商业目的！
大屏网站粒子效果实现方式
05-06
大屏网站粒子效果实现方式
node-v8.11.3-sunos-x86.tar.xz
最新发布
05-06
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
KingbaseES的jar包
05-06
KingbaseES的jar包
Python编程基础: 掌握核心概念、语法与技巧，涵盖数据类型、控制结构、函数、模块等，适用于初学者及希望夯实基础的开发者
05-06
"想要快速掌握Python编程的基础知识吗？这个资源是您的最佳选择！它详细介绍了Python编程的基本知识点，包括数据类型、控制结构、函数、模块等内容，让您轻松入门Python编程。 无论您是编程初学者，还是有一定编程基础但希望深入学习Python的开发者，这个资源都适合您。它以通俗易懂的语言，配合实例演示，帮助您更好地理解和掌握Python编程的核心概念和技巧。 这个资源的使用场景非常广泛。您可以在学习Python编程的过程中，将其作为参考资料，随时查阅和巩固知识点。也可以在准备Python面试或考试时，通过这个资源进行复习和提升。此外，如果您是计算机相关专业的学生或教师，这个资源也可以作为教学资料，辅助教学和学习。 这个资源的优势在于它的全面性和实用性。它不仅涵盖了Python编程的基础知识点，还提供了一些实用的编程技巧和经验分享。通过学习这个资源，您将能够更加熟练地使用Python编程，解决实际问题和项目挑战。 如果您还在为找不到好的Python编程学习资源而苦恼，那么这个资源将是您的解决方案。它不仅能够帮助您快速入门Python编程，还能够为您的编程之路提供坚实的支持。还等什么
聚类分析（108页 PPT）.ppt
05-06
聚类分析（108页 PPT）
径硕科技：B2B企业如何一个人搭建内容营销体系？.pdf
05-06
径硕科技：B2B企业如何一个人搭建内容营销体系？.pdf
ISO IEC 27001-2022 信息安全、网络安全和隐私保护信息安全管理系统要求.pdf
05-06
ISO IEC 27001-2022 信息安全、网络安全和隐私保护信息安全管理系统要求.pdf
jquery 判断div是否有滚动条
04-26
可以使用以下代码来判断一个div是否有滚动条： ```javascript if ($('#divId').height() $('#divId')[0].scrollHeight) { // 有滚动条 } else { // 没有滚动条 } ``` 其中，`#divId`为你要判断的div的id。这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值