<!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. manta api

    Authentication 有几个访问方法. 验证对服务的请求的主要方法是使用TLS上的HTTP签名. 在大多数情况下,您只需使用SSH私钥对HTTP Date标头的小写日期:和值进行签名; 这样做 ...

  2. Python 生成MYSQL inser语句

    背景: 一般来说,navicat生成的insert已经够用了 如果说一张表有2,30个字段,每个字段还得一一对上,其实是很难的.所以抽空写了个小程序.用它完全不用担心字段对不上了.因为没有时间,需要手 ...

  3. 689. Maximum Sum of 3 Non-Overlapping Subarrays三个不重合数组的求和最大值

    ［抄题］: In a given array nums of positive integers, find three non-overlapping subarrays with maximum ...

  4. spring中添加google的guava缓存(demo)

    1.pom文件中配置 <dependencies> <dependency> <groupId>org.springframework</groupId> ...

  5. Openssl ec命令

    一.简介 椭圆曲线密钥处理工具 二.语法 openssl ec [-inform PEM|DER] [-outform PEM|DER] [-in filename] [-out filename] ...

  6. Openssl ecparam命令

    一.简介 椭圆曲线密钥参数生成及操作 二.语法 openssl ecparam [-inform DER|PEM] [-outform DER|PEM] [-in filename] [-out fi ...

  7. 06 Counting Point Mutations

    Problem Figure 2. The Hamming distance between these two strings is 7. Mismatched symbols are colore ...

  8. centos7用fdisk进行分区

    1.查看分区信息:fdisk -l 从上面可以看到,/dev/sdb分区还没有使用,现在将其划分成2个10G的分区. 2.执行:fdisk /dev/sdb 1):fdisk命令参数 p:打印分区表. ...

  9. 【转载】Redis的Java客户端Jedis的八种调用方式(事务、管道、分布式…)介绍

    转载地址:http://blog.csdn.net/truong/article/details/46711045 关键字:Redis的Java客户端Jedis的八种调用方式(事务.管道.分布式…)介 ...

  10. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...