<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <style type="text/css">

        *{margin:0; padding:0;}

        body{ max-width: 640px; margin:0 auto; }

        .box{ display: block;  height: 50px; line-height: 50px;text-align: center; border:1px solid #ccc; border-radius: 20px; background-color: #ddd; margin-top: 30px; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 9 }

    </style>

</head>

<body>

    <div style="height:300px;background-color: #B15F5F"></div>

    <div style="height:100px;background-color: #619A51" id="demo">当滚到到这个div，隐藏下面的按钮</div>

    <div style="height:300px;background-color: #645FB1" ></div>

    <div style="height:200px;background-color: #F18733"></div>

    <a href="javascript:;" class="box" id="btn">按钮</a>

    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function(){

        var demoHeight = $("#demo").offset().top;

        window.onscroll=function(){

            var this_scrollTop = $(this).scrollTop();

            if(this_scrollTop>demoHeight ){

                $("#btn").hide();

            }else{

                $("#btn").show();

            }

        };

    });

    </script>

</body>

</html>

效果图：

jQuery滚动到特定位置时出现的更多相关文章

  1. 【HTML】网页中如何让DIV在网页滚动到特定位置时出现

    用js或者jquery比较好实现.但你要知道,滚动到哪个特定位置,例如滚动到一个标题h3那显示这个div,那么可以用jquery算这个h3距离网页顶部的距离:$("h3").off ...

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

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

  3. jquery滚动到指定位置

    利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

  4. JQuery实现页面刷新滚动条自动滚动到特定位置

    var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...

  5. jquery 获取html <img /> 位置时出错问题

    如图所示,这样端口小图片都是通过jquery html()方法设置的(参数html就是画整个图片的html字符串),如图: 但是出现图片没有完全渲染完的问题,如图: 从图中可以看出在代码运行到断点的时 ...

  6. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

  7. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  8. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  9. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

随机推荐

  1. 前面部分（WCF全面解析1）

    WCF全面解析 [同力推荐] 我经历了COM时代,一直把Don BOx的<COM本质论>奉为我的指路明灯.能把SOA机理和WCF这种特定厂商实现的技术讲得如<COM本质论>一样 ...

  2. css常用属性总结之 id和class的区别，使用类还是ID?

    前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...

  3. Shaders

    [Shaders] 1.Vertex-Lit,顶点光照着色器. Vertex-Lit is one of the simplest shaders. All lights shining on it ...

  4. Flying Right POJ - 3038

    有一条从南到北的航线,航线上有N个机场1-n从南到北分布,每天早上飞机从1飞到n,傍晚从n飞到1.有k组乘客,他们数量为M[k],从S飞到E,飞机上只有C个座位,计算每天飞机最多能拉多少乘客 贪心可以 ...

  5. java实现将文件压缩成zip格式

    以下是将文件压缩成zip格式的工具类(复制后可以直接使用): zip4j.jar包下载地址:http://www.lingala.net/zip4j/download.php package util ...

  6. Oracle 日志报错导致的 “没有登录” 问题

    遇到的问题是日志空间满了,导致Oracle无法登陆,但用PL/SQL登录仅会提示“没有登录” # 首先检查日志空间是否满了,并删除过期日志 rman target sysdba/password@or ...

  7. 如何申请新浪SAE，发布自己的网站

    你是否会看见诸如(***.sinaapp.com)类的域名?是否和新浪有什么关系?抑或想要一个免费的空间展示自己的个人主页;没问题,下面我来分享一下SAE的申请流程吧! 首先,打开SAE(http:/ ...

  8. centos 6.5 部署openvpn 2.4

    软件下载地址 软件下载地址 https://openvpn.net/index.php/open-source/downloads.html 服务端 源Tarball(gzip) https://sw ...

  9. Python Windows下打包成exe文件

    Python Windows 下打包成exe文件,使用PyInstaller 软件环境: 1.OS:Win10 64 位 2.Python 3.7 3.安装PyInstaller 先检查是否已安装Py ...

  10. Spring在代码中获取bean的几种方式（转）

    获取spring中bean的方式总结: 方法一:在初始化时保存ApplicationContext对象 ApplicationContext ac = new FileSystemXmlApplica ...