<!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. Spring boot(三)在Spring boot中Redis的使用

    spring boot对常用的数据库支持外,对nosql 数据库也进行了封装自动化. redis介绍 Redis是目前业界使用最广泛的内存数据存储.相比memcached,Redis支持更丰富的数据结 ...

  2. spring boot(二）web综合开发

    上篇文章介绍了Spring boot初级教程:spring boot(一):入门,方便大家快速入门.了解实践Spring boot特性:本篇文章接着上篇内容继续为大家介绍spring boot的其它特 ...

  3. xlrd 安装步骤

    官网 https://pypi.python.org/pypi/xlrd 下载 解压 执行python setup.py install进行安装 --------------------------- ...

  4. Sona

    Sona Sona , Maven of the Strings . Of cause, she can play the zither. Sona can't speak but she can m ...

  5. 一、J2EE

    一.HTTP协议中的响应代码 响应代码从1xx--5xx一共有41中.常见的 404:表示访问的页面不存在.这表示一个浏览器的错误,就是服务端没有提供这个服务,你却去访问.这个锅要算在浏览器头上,而不 ...

  6. SpringMVC+HibernateValidator，配置在properties文件中的错误信息回显前端页面出现中文乱码

    问题: 后台在springMVC中使用hibernate-validator做参数校验的时候(validator具体使用方法见GOOGLE),用properties文件配置了校验失败的错误信息.发现回 ...

  7. Oracle12c CDB架构图

  8. Win10系列：VC++媒体播放控制3

    (5)添加视频进度条 视频进度条可以用来显示当前视频的播放进度,并可以通过拖动视频进度条来改变视频的播放进度.接下来介绍如何实现视频进度条,首先打开MainPage.xaml文件,并在Grid元素中添 ...

  9. bzoj2330

    题解: 差分约束系统 要我们求最小值 显然就是转化为最长路 然后spfa一下即可 代码: #include<bits/stdc++.h> using namespace std; ; lo ...

  10. js如何生成一个对象，并转化为json字符串

    js如何生成一个对象,并转化为json字符串,很多人都会误写为: var ary = []; var obj = {}; for (var i = 0; i < 3; i++) { obj.na ...