<!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. git push 失败出现error: src refspec master does not match any.解决方案

    今天写好一个demo往GitHub上传时报错 错误提示: error: src refspec master does not match any. error: failed to push som ...

  2. Version Control System

    Version  Control System(版本控制系统),是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.版本控制系统不仅可以应用于软件源代码的文本文件,而且可以对任何类型 ...

  3. URL与URI的含义及区别

    1.1 什么是URI? 简单点说:URI就是通用资源标志符,不理解是吧,我第一次听说也是不理解. 进一步说:网络上的一些资源(文档.图片.音频.视频.程序等)都是有一些通用资源标识(Universal ...

  4. PostgreSQL&PostGIS完全安装

    检查PostGIS.PostgreSQL.GEOS.GDAL.PROJ等各软件的版本依赖关系 http://trac.osgeo.org/postgis/wiki/UsersWikiPostgreSQ ...

  5. springmvc 自定义view支持json和jsonp格式数据返回

    1.如果controlloer上用@ResponseBody注解,则用<mvc:message-converter>里面配置的json解析器进行解析 <mvc:annotation- ...

  6. Qt绘制文本一

    QPainterPath,使用 drawText且设置字体,再使用painter.drawText方式 效果图: void WgtText::paintEvent(QPaintEvent *event ...

  7. 使用MongoDB数据库（1）（三十五）

    MongoDB简介 MongoDB是一个基于分布式文件存储的数据库,它是一个介于关系数据库和非关系数据库之间的产品,其主要目标是在键/值存储方式(提供了高性能和高度伸缩性)和传统的RDBMS系统(具有 ...

  8. 0-MAVEN SETTING

    localRepository : 表示本地库的保存位置,也就是maven主要的jar包保存位置,默认在${user.dir}/.m2/repository,如果需要另外设置,就换成其他的路径 Ser ...

  9. Win10系列：VC++绘制位图图片

    在使用Direct2D绘制图片的过程中,通过IWICImagingFactory工厂接口来得到绘制图片所需要的资源.本小节将介绍如何通过IWICImagingFactory工厂接口得到这些资源,并使用 ...

  10. 用linq和datatable巧妙应用于微软报表rdlc

    看看代码吧.现在我用Linq已经上瘾,对SQL语言已经几乎不用了,可惜的是rdlc不支持linq,要采用sql语言生成datatable,用datatable绑定rdlc,这里,应用了一个技巧,解决了 ...