Jquery几行代码解决跟随屏幕滚动DIV

最新推荐文章于 2022-08-25 14:49:11 发布
最新推荐文章于 2022-08-25 14:49:11 发布
阅读量2.8k 收藏 2
点赞数 1
分类专栏： javascript 文章标签： jquery
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>jquery.text-effects</title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  6.     <style>  
  7.         #test  
  8.         {  
  9.             position: absolute;  
  10.             top: 10px;  
  11.             right: 10px;  
  12.             width: 130px;  
  13.             height: 60px;  
  14.             background: #555;  
  15.             color: #fff;  
  16.             font-size: 13px;  
  17.         }  
  18.     </style>  
  19.     <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>  
  20.     <script language="javascript">  
  21.         $(document).ready(function () {  
  22.             var menuYloc = $("#test").offset().top;  
  23.             $(window).scroll(function () {  
  24.                 var offsetTop = menuYloc + $(window).scrollTop() + "px";  
  25.                 $("#test").animate({ top: offsetTop }, { duration: 600, queue: false });  
  26.             });  
  27.         });   
  28.     </script>  
  29. </head>   
  30. <body>   
  31.     <h1>7行代码的跟随屏幕滚动层.</h1>   
  32.     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>   
  33.     <div id="test">Dev By CssRain.cn<br/>Test ie6+,firefox3.0</div>   
  34.     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>   
  35.     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>   
  36. </body>   
  37. </html> 
  38. 后面我修改了一下，让浏览器滚动到340px的时候，导航栏才滚动
  39. <script>
    $(function(){
    var leftMenu = $(".left_menu");
    var leftMenuPosition = leftMenu.offset().top;
    $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop>340){
    var offsetTop = leftMenuPosition + $(window).scrollTop()-200+"px";
    leftMenu.animate({top:offsetTop},{duration:600,queue:false});
    }else{
    leftMenu.animate({top:leftMenuPosition},{duration:600,queue:false});
    }
    })
    })
    </script> 
我正在做这个官网，以后会有相关的案例 http://www.qy.com.cn/

timtimup_KSM
关注
专栏目录
div跟随水平滚动条移动
03-10
div或其他html块内容跟随滚动条移动，滚动移动时，内容跟着移动，并保持最右边
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
12-09
标题中的"jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层"指的是使用jQuery库的一个简单示例，展示了如何通过少量代码实现一个元素（在这个例子中是ID为`test`的div）在页面滚动时始终保持在浏览器视口的特定位置。...
让一个DIV在页面右边并跟随滚动条移动
05-09 1061
function getScroll() { var top, left, width, height; if (document.documentElement &amp;&amp; document.documentElement.scrollTop) { top = document.documentElement.scrollTop; left = document.documen...
html div跟随页面滚动条滚动,javascript – 当我向下滚动页面时,如何让div跟随我？...
weixin_32285357的博客
06-03 1427
您可以在窗口对象上挂钩scroll事件.处理事件时,请查看窗口/文档的垂直滚动位置(有关如何操作,请参阅SO上的this answer).对div使用绝对定位,并根据需要将其顶部更新为坐标.FWIW,我会非常小心这样做.通常当用户滚动时,这是因为他们想要查看与页面上的内容不同的内容.就个人而言,我讨厌在网页上跟随我的盒子. :-)但这并不意味着有时没有充分的理由这样做.非常基本的例子(live c...
jQuery跟随屏幕滚动的层
aijue2015的博客
02-21 138
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><!-- saved from url=(0040)http://www.cssrain.cn/demo/floatDIV.h...
jquery 悬浮div，滚动条跟随
iteye_10359的博客
08-21 408
&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; &lt;
jquery跟随屏幕滚动效果的实现代码
10-22
标题中的“jquery跟随屏幕滚动效果的实现代码”指的是在网页设计中使用jQuery库来创建一个元素（例如广告或导航栏）在用户滚动页面时始终保持在屏幕的特定位置，这种效果通常被称为固定定位或者粘性头部。...
jQuery实现div浮动层跟随页面滚动效果
12-10
【jQuery实现div浮动层跟随页面滚动效果】 在网页设计中，有时我们需要创建一种效果，使得某个div元素（如广告栏、导航菜单等）在用户滚动页面时始终保持在屏幕的特定位置，这种效果被称为浮动层或漂浮层。jQuery库...
基于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-19
### jQuery实现div跟随鼠标移动的知识点 #### 1. jQuery基础 在深入讨论如何使用jQuery实现div跟随鼠标移动之前，需要了解jQuery的基本概念。jQuery是一个快速、小巧、功能丰富的JavaScript库，通过使用jQuery，...
浮动div，页面两边滚随滚动条滚动的DIV
02-14
浮动div 页面两边滚随滚动条滚动的DIV div滚动
div模块层随页面滚动遇顶固定的两种方法(js&jQuery)
10-29
一、遇顶固定的例子 我一直以为是某个div或层随屏幕滚动，遇顶则固定，离开浏览器顶部又还原这样的例子其实不少，其实它的名字叫“层的智能浮动效果”。目前我们在国内的商业网站上就常常看到这样的效果了。例如淘宝网的搜索结果页的排序水平条，在默认状态时，该工具条是跟随页面滚动的，如下图： 而当我们下拉滚动条，随着页面向下滚动，当此工具条接触到浏览器的上边缘时，这时就会独立出来固定在顶部，不跟随页面滚动而滚动了，如下图： 类似的例子效果我们在别的网站上都有看到过，例如腾讯微博首页上，当我们下拉屏幕浏览最新微博时，工具条也会出现这个效果，如下图： 这个效果看上去方便，贴心，也许还带推动广告的促销呢。原理其实很简单，本文展示两种方法。 二、智能浮动效果的实现原理 它分两种状态，一是默认状态，二是浮动固顶状态。 默认状态就是默认状态，什么也不用做，保持原有的CSS就好。无论有没有对它做定位，做了absolute也好，没做也好，都行。 关键是当浏览器屏幕滚动时，该对象div层要移除浏览器界面视区的时候，是要修改它的position属性，让它浮动在窗口的上沿显示就行了。最好的position属性是fixed，可以在IE6+和其他浏览器浮动层平滑的固定定位，由于IE6老大哥不支持fixed属性，所以可以另外赋予它absolute属性。当然也会产生副作用——滚动不平滑。不过也无所谓了，在微软公布不再修补更新XP漏洞，在中国360安全卫士的帮助下虽然大家仍然使用XP，但IE的用户已经是少之又少了。 那接下来，如何判断当前div层与浏览器窗口的上边缘接触了呢？遇到浏览器顶部了呢？ 当浮动层div与浏览器窗口上边缘接触的一瞬间，其页面垂直偏移值与页面的滚动高度是一致的，所以我们就用这个进行判断。那如何获得页面上元素距离页面的垂直距离呢？ 这里则是使用javaScript库实现。
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
08-14
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动
jQuery的购买记录列表文字滚动更新代码.zip
07-11
jQuery的购买记录列表文字滚动更新代码
div 自动跟着滚动条移动
LegendHonor的博客
08-25 1335
div 自动跟着滚动条移动
DIV层 随滚动条一起滚动
xiaokui604的专栏
03-31 2507
function scrollImg() { var posX, posY; if (window.innerHeight) { posX = window.pageXOffset; posY = window.pageYOffset; }
div层随滚动条滚动
zhengfc
01-12 142
$().ready(function(){ //左右移动滚动条 var scrollDivEl = $(".scrollDiv"); var scrollDivEl2 = $(".scrollDiv2"); var scrollHtml =$('#scrollTd').html(); //1.div左测表头高度控制...
如何让div随着滚动条移动
snow9547的专栏
10-22 1100
1.一个简单的jsp页面 秒杀首页 lastScrollY=0; function ...
javascript实现div跟随滚动条移动
bsr1983的专栏
03-03 890
        实现过程中遇到的主要问题有两点          首先要解决的是在不同浏览器下获取ScrollTop值的问题，采取的方法是：          var scrollTop = window.pageYOffset  || document.documentElement.scrollTop || document.body.scrollTop||0;            ...
jQuery实现div tab切换示例及代码
本文档提供了使用jQuery实现动态div标签tab切换的实例代码，这是一种常见的前端交互设计技术。首先，我们来详细解读一下如何通过HTML、CSS和JavaScript结合jQuery来创建一个可切换的tab面板。 HTML部分: 在这个例子...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值