1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7.     <style type="text/css">
  8.         *{margin:0; padding:0;}
  9.         body{ max-width: 640px; margin:0 auto; }
  10.         .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 }
  11.  
  12.     </style>
  13. </head>
  14. <body>
  15.     <div style="height:300px;background-color: #B15F5F"></div>
  16.     <div style="height:100px;background-color: #619A51" id="demo">当滚到到这个div，隐藏下面的按钮</div>
  17.     <div style="height:300px;background-color: #645FB1" ></div>
  18.     <div style="height:200px;background-color: #F18733"></div>
  19.     <a href="javascript:;" class="box" id="btn">按钮</a>
  20.     <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
  21.     <script type="text/javascript">
  22.         $(function(){
  23.         var demoHeight = $("#demo").offset().top;
  24.         window.onscroll=function(){
  25.             var this_scrollTop = $(this).scrollTop();
  26.             if(this_scrollTop>demoHeight ){
  27.                 $("#btn").hide();
  28.             }else{
  29.                 $("#btn").show();
  30.             }
  31.         };
  32.     });
  33.     </script>
  34.  
  35. </body>
  36. </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. ascii编码转utf8编码，适用于python2

    def ascii2utf8(ascii): line = eval(("'" + ascii.strip() + "'")) return line

  2. 201671010140. 2016-2017-2 《Java程序设计》java学习第十六周

    java学习第十六周-并发        本周,学习了Java中线程,并发的知识,在老师的带领下,进行了对知识的理解学习,以及对实验的运行讲解,对这一块内容掌握的还可以,在自主编程中,也能够完成.线, ...

  3. JRE,JVM,JDK

    JRE,JVM,JDK的关系.JRE(Java Runtime Environment)java运行环境,我们可以把它看成是一个操作系统.也就是说JRE提供了Java执行的软件平台. JVM (Jav ...

  4. shell if,case,for,while语法

    #shell if的语法 if [空格 xxx 空格] then echo xxxxx exit 1/2/3/4/.... 0表示正确. elif [空格 xxx 空格] then echo xxxx ...

  5. ajax获取json数据为undefined--原因解析

    解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...

  6. SQL 数据库 学习 005 学习必备的一些操作 --- 如何新建数据库 如何附加和分离数据库（如何备份还原数据库） 如何删除数据库

    我的电脑系统: Windows 10 64位 使用的SQL Server软件: SQL Server 2014 Express 如果我们要学习这个数据库,我们需要学习什么知识.比如:如何新建一个数据库 ...

  7. sqlserver服务器硬件性能瓶颈分析

    硬件性能瓶颈 内存 内存对SQL Server性能的影响胜过任何其他硬件.因此,对SQL Server系统的内存使用情况进行定期监视以确保内存的可用百分比高于20%是很有必要的.如果用户遭遇性能问题, ...

  8. 文件操作getc

    getc函数的作用是从打开的文件中获取一个字符,并加文件指针自动加1,获取的字符在返回值中. 我写了一个读取一个文件255个字节的程序. int main() { FILE *p; fopen_s(& ...

  9. code2039 骑马修栏杆

    欧拉通路: find_circuit(结点i){ 当结点i有邻居时 选择任意一个邻居j: 删除边(i,j)或者做访问标记: find_circuit(结点j): 输出或存储节点i: } 本题注意点的编 ...

  10. python3--json反序列化

    # Auther: Aaron Fan # 加载文件中的数据 import json with open('test.txt','r',encoding='utf-8') as f: info = j ...