<!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. 『C++』基础知识点

    一.基础知识 1.C++编译流程 以Unix系统编译中间文件为说明: .cpp—(编译预处理)—>.ii—(编译)—>.s—(汇编)—>.o—(ld,连接)—>.out 2.# ...

  2. shiro中SSL

    对于SSL的支持,Shiro只是判断当前url是否需要SSL登录,如果需要自动重定向到https进行访问. 首先生成数字证书,生成证书到D:\localhost.keystore 使用JDK的keyt ...

  3. Matlab-4:追赶法（crout分解）工具箱

    function x=chase (a,b,c,f) % the method of chaase******************************* % a, b, c,分别是是方程组的下 ...

  4. leetcode-algorithms-30 Substring with Concatenation of All Words

    leetcode-algorithms-30 Substring with Concatenation of All Words You are given a string, s, and a li ...

  5. hdu1569-方格取数-二分图网络流

    方格取数(2) Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  6. C# 3.0 / C# 3.5 隐式（推断）类型 var

    概述 你可能对隐式类型(或隐式推断类型)这个名称比较陌生,但是 var 这个关键字应该很熟悉. 在 C# 中使用 var 声明一个对象时编译器会自动根据赋值语句推断这个局部变量的类型. 赋值以后,这个 ...

  7. 二、工作中常用的SQL优化

    除了给table建立索引之外,保持良好的SQL语句编写. 1.通过变量的方式来设置参数 比如动态查询的时候,尽量这样写 好:string strSql=" SELECT * FROM PEO ...

  8. nginx反向代理配置相对路径

    需求: 在公司内部搭建了一个php的网站,想用花生壳映射到外网. 一.反向代理解决直接映射不成功问题 直接用把花生壳的"域名+端口"指向此php网站并竟然不生效.但是不加网站名可以 ...

  9. vue element-ui 通过v-for渲染的el-form-item组件，使用自带的表单验证

    HTML: <el-form ref="newTermDetail" :model="newTermDetail" class="auto_fo ...

  10. [转]使用CMS垃圾收集器产生的问题和解决方案

    在之前的一篇文章<CMS vs. Parallel GC>里通过实验的方式对比了并行和并发GC的优缺点,在文章结尾提到,CMS并行GC是大多数应用的最佳选择,然而, CMS并不是完美的,在 ...