<!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. 【PowerDesigner】【9】禁止Name与Code同步

    问题:修改了某个字段的name,其code也跟着修改 步骤:Tools→General Options..→Dialog→取消勾选“Name to Code mirroring”复选框 参考博客: 1 ...

  2. 如何在VMware系统中的ubuntu16.04中建立与win7系统的共享文件夹

    点击虚拟机设置一次得到如图所示 系统默认放在了 /mnt/hgfs文件夹 点击虚拟机安装vmware tools 解压vmware tools压缩包 运行sudo ./vmware-install.p ...

  3. sql百万级查询优化（转）

    < 数据库技术内幕 > 处理百万级以上的数据提高查询速度的方法: 1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进 ...

  4. js动态检测加载 JQ

    var jqcdnurl = 'https://cdn.bootcss.com/jquery/3.2.1/jquery.js'; //控制台输出 function log() { for (var i ...

  5. OCP知识点讲解 之 检查点队列与增量检查点

    原创 http://blog.chinaunix.net/uid-26762723-id-3271558.html 检查点的主要目的是以对数据库的日常操作影响最小的方式刷新脏块.脏块不断的产生,如何将 ...

  6. iOS 面试总结

    APP崩溃 启动秒退 在新 iOS 上正常的应用,到了老版本 iOS 上秒退最常见原因是系统动态链接库或Framework无法找到.这种情况通常是由于 App 引用了一个新版操作系统里的动态库(或者某 ...

  7. Windows和Linux创建软链接和硬链接

    1.Wondows创建软链接和硬链接 mklink [/d] [/h] link target /d--创建目录软链接:默认为文件软链接:创建目录链接时必须使用该选项不然创出的软链接无效 /h--创建 ...

  8. Nop 4.1版本已经迁移到.net core2.1版本

    1. github 下载,4.1版本,运行, install时,会让你新增后台账户密码,sql服务器 2. 在Configuration 新增Language 3. 上传中文语言包 , 你也可以先导出 ...

  9. UVa 11039 - Building designing 贪心，水题 难度: 0

    题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...

  10. xshell提示必须安装最新的更新

    今天大家的xshell基本都出了这个问题 调整时间,调整到比较前的时间,打开xshell即可. 然后工具->选项 把更新去了