<!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. ubuntu下面板上无网络连接的图标

    解决方法:删除旧的网络配置,重新让networkManager自动配置 sudo service network-manager stop sudo rm /var/lib/NetworkManage ...

  2. HttpServletResponse返回页面弹窗

    下载方法: @RequestMapping(value = "/download.htm") public void downLoadFile(String id,HttpServ ...

  3. 【UVA1515 算法竞赛入门指南】 水塘【最小割】

    题意: 输入一个h行w列的字符矩阵,草地用“#”表示,洞用"."表示.你可以把草改成洞,每格花费为d,也可以把洞填上草,每格花费为f.最后还需要在草和洞之间修围栏,每条边花费为b. ...

  4. 详细探究Spark的shuffle实现

    Background 在MapReduce框架中,shuffle是连接Map和Reduce之间的桥梁,Map的输出要用到Reduce中必须经过shuffle这个环 节,shuffle的性能高低直接影响 ...

  5. Struts2源代码查看

    -----------------siwuxie095 Struts2 源代码查看 1.Struts2 的核心过滤器 StrutsPrepareAndExecuteFilter 实现了 Filter ...

  6. hibernate 反向生实体类 and 为什么老是多一个id

    hibernate 反向生实体类 and 为什么老是多一个id 2017年04月01日 20:32:51 阅读数:548

  7. 深入理解mysql的隔离级别

    建表插入测试数据A> create table test(id int ,num int) ;Query OK, 0 rows affected (0.53 sec) A> insert ...

  8. Qt Setting Application Icon

    Qt4 设置应用程序图标 将一个ico图标放在资源文件夹下; 然后建立txt,输入 IDI_ICON1 DISCARABLE "myico.ico"; 保存文件,将其后缀改为.rc ...

  9. Jenkins一天中构建多次

    Build after other projects are built:在其他项目触发的时候触发,里面有分为三种情况,也就是其他项目构建成功.失败.或者不稳定的时候触发项目: Poll SCM:定时 ...

  10. line1: 1: Syntax error: word unexpected (expecting ")")

    行时错误:line1: 1: Syntax error: word unexpected (expecting ")") 查看Makefile编译规则,可能由于依赖关系造成编译器使 ...