<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动事件</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;}
.box{width:80%;margin:500px auto 0;}
.big{width:60%;height:2000px;background: #ddd;}
.small{width:30%;height:500px;background: pink;}
.left{float: left}
.qi{width:100%;height:1000px;background: blue;clear:both;}
</style>
</head>
<body>
<div class="box">
        <div class="big left"></div>
        <div class="small left"></div>
</div>
<div class='qi'>

</div>
<script>
             // 获取大div的高度
               var big_hieight=$('.big').height();
               console.log(big_hieight);

// 获取距离窗口的距离
                var box_top=$('.box').offset().top;
            $(window).scroll(function(){
                 // 获取滚动条的滚动的距离
                  var windowtop=$(window).scrollTop();
                 if( windowtop>box_top && windowtop<big_hieight){
                       $('.small').css("display","block");
                       $('.small').offset({top:windowtop+20,left:825});
                  }else if(windowtop<box_top){
                            $('.small').offset({top:box_top,left:825})
                  }
                  if(windowtop>big_hieight+200){
                             $('.small').css("display","none");
                   }
             })
</script>
</body>
</html>

关注微信小程序

指定某个div随着指定大div滚动，而不是随着整个窗口固定不动的更多相关文章

  1. 滚动时div的背景图片随之滚动

    在浏览一些网站时发现有一种效果是当滚动时看到某一DIV的背景也会随之滚动,如下: 当滚动时内容位置保持不变,但是内容后面的背景却在随着滚动.随之我通过审查元素看到了其是通过background-pos ...

  2. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  3. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  4. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  5. DIV+javascript实现首尾相连循环滚动效果

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

  6. div+css 怎么让一个小div在另一个大div里面 垂直居中

    div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent {           width:800 ...

  7. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  8. 大div中，三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 织梦中limit的用法详解（调用指定id下的指定文章）

    limit的用法大致可以理解为:调用指定id下的指定文章. 下面为代码片段,需要的朋友自行拿去: {dede:arclist typeid='6' row='1' limit='0,1'} <l ...

随机推荐

  1. 使用vue-router设置每个页面的title

    进入 router 文件夹底下的index.js文件 首先引入: import Vue from 'vue' import Router from 'vue-router' 然后在路由里面配置每个路由 ...

  2. URL和URI的不同

    URL是什么?有什么用? URL(统一资源定位符)是Internet上资源的地址,可以定义为引用地址的字符串,用于指示资源的位置以及用于访问它的协议. URL是在网络上定位资源的最普遍使用的方式,它提 ...

  3. 实现qq登录

    //html页面   引入qq图标 <td> <a href="#" onclick="toLogin()"><img src=& ...

  4. MapReduce（二）

    MapReduce(二) mapreduce 将Text转化为对象进行处理数据. 根据一来说,将date,classname,name,subject,score变为对象属性 我的数据是:是有重复的. ...

  5. Vuejs实现轮播图

    css: <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } .clearfi ...

  6. 安天透过北美DDoS事件解读IoT设备安全——Mirai的主要感染对象是linux物联网设备，包括：路由器、网络摄像头、DVR设备，入侵主要通过telnet端口进行流行密码档暴力破解，或默认密码登陆，下载DDoS功能的bot，运行控制物联网设备

    安天透过北美DDoS事件解读IoT设备安全 安天安全研究与应急处理中心(安天CERT)在北京时间10月22日下午启动高等级分析流程,针对美国东海岸DNS服务商Dyn遭遇DDoS攻击事件进行了跟进分析. ...

  7. curl和wget的区别和使用

    curl和wget基础功能有诸多重叠,如下载等. 非要说区别的话,curl由于可自定义各种请求参数所以在模拟web请求方面更擅长:wget由于支持ftp和Recursive所以在下载文件方面更擅长.类 ...

  8. 苹果手机 disabled 的背景颜色没有

    解决方案 .class disabled{ background-color: rgb(235, 235, 228); opacity:1}

  9. corePoolSize和maxPoolSize的区别

    受限于硬件.内存和性能,我们不可能无限制的创建任意数量的线程,每一台机器允许的最大线程是一个有界值.因此ThreadPoolExecutor管理的线程数量是有界的.线程池就是用这些有限个数的线程,去执 ...

  10. Maven常见jar包依赖

    <!-- servlet --> <dependency> <groupId>javax.servlet</groupId> <artifactI ...