<!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. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 14—Dimensionality Reduction 降维

    Lecture 14 Dimensionality Reduction 降维 14.1 降维的动机一:数据压缩 Data Compression 现在讨论第二种无监督学习问题:降维. 降维的一个作用是 ...

  2. [iOS]使用autolayout的时候会有明明设置和父视图左右间距为0但却还有空隙问题

    有时候设置左右与父视图间距为0但却还有空隙,relative to margin 作怪,到关系里面,把这个取消掉.如关系里面的 firstitem 如果显示 xxView.trailling.marg ...

  3. go grpc

    https://godoc.org/google.golang.org/grpc go get google.golang.org/grpc go get -a github.com/golang/p ...

  4. Scala基础：定义变量和逻辑判断语句以及方法和函数

    定义变量和逻辑判断语句 package com.zy.scala import scala.collection.immutable object ScalaDemo { def main(args: ...

  5. jquery下的提交，点击按钮没反应，post方法不执行 JSON方式在FORM表单下不起作用

    jquery下的提交,点击按钮没反应,post方法不执行 JSON方式在FORM表单下不起作用

  6. 273. Integer to English Words数字转为单词

    ［抄题］: Convert a non-negative integer to its english words representation. Given input is guaranteed ...

  7. 91. Decode Ways反编译字符串

    ［抄题］: A message containing letters from A-Z is being encoded to numbers using the following mapping: ...

  8. 26-三个水杯(bfs)

    三个水杯 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给出三个水杯,大小不一,并且只有最大的水杯的水是装满的,其余两个为空杯子.三个水杯之间相互倒水,并且水杯没有 ...

  9. zigbee组播通信原理

    组播: 在zigbee网络里面,把网络节点标记为组的方式来进行通信:发送模块如果发送的组号和网络里标记模块的组号相对应,那么这些模块就可以拿到这些无线数据包. 特点: 1.分组中组的编号有两个字节. ...

  10. GC Roots的理解以及如何判断一个对象为“垃圾”

    http://blog.csdn.net/Great_Smile/article/details/49935307 这篇博客中讲解了哪些可以作为GC Roots以及如何判断一个对象为垃圾