1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>Document</title>
  7.     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  8.     <style type="text/css">
  9.     * {
  10.         margin: 0;
  11.         padding: 0;
  12.     }
  13.  
  14.     body {
  15.         max-width: 640px;
  16.         margin: 0 auto;
  17.     }
  18.  
  19.     .box {
  20.         display: block;
  21.         height: 50px;
  22.         line-height: 50px;
  23.         text-align: center;
  24.         border: 1px solid #ccc;
  25.         border-radius: 20px;
  26.         background-color: #DC7E2D;
  27.         margin-top: 30px;
  28.         position: fixed;
  29.         bottom: 0;
  30.         left: 0;
  31.         width: 100%;
  32.         z-index: 9
  33.     }
  34.     </style>
  35. </head>
  36.  
  37. <body>
  38.     <div style="height:300px;background-color: #3045A4"></div>
  39.     <div style="height:100px;background-color: #3E41D6"></div>
  40.     <div style="height:300px;background-color: #645FB1"></div>
  41.     <div style="height:200px;background-color: #F18733"></div>
  42.     <a href="javascript:;" class="box" id="btn">按钮</a>
  43.  
  44.     <script>
  45.     window.onscroll = function() {
  46.         var btn = document.getElementById('btn');
  47.         var scrollTop = document.body.scrollTop || (document.documentElement && document.documentElement.scrollTop);
  48.         if (scrollTop >=300) {
  49.             btn.style.display = 'none';
  50.         } else{
  51.             btn.style.display = 'block';
  52.         }
  53.     }
  54.     </script>
  55. </body>
  56.  
  57. </html>

效果图：

javascript滚动到大于一定距离显示隐藏的更多相关文章

  1. javascript进行百度换肤 和显示隐藏一个窗口的操作

    简单的运用javascript来进行百度换肤的操作 <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. 利用JavaScript的if语句判断元素显示隐藏

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  3. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  4. python 全栈开发，Day50(Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏)

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  5. 前端JavaScript(1) --Javascript简介,第一个JavaScript代码,数据类型,运算符,数据类型转换,流程控制,百度换肤,显示隐藏

    一.Javascript简介 Web前端有三层: HTML:从语义的角度,描述页面结构 CSS:从审美的角度,描述样式(美化页面) JavaScript:从交互的角度,描述行为(提升用户体验) Jav ...

  6. 鼠标放上时显示隐藏的div或者其他代码的“jquery”的三种写法和“JavaScript”的一种写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  8. iframe的滚动栏问题：显示/隐藏滚动栏

    iframe 问题2008-01-22 16:37******   显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...

  9. jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

    1.jQuery中隐藏元素的hide方法   让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元 ...

随机推荐

  1. HttpServletResponse返回页面弹窗

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

  2. 108.Convert Sorted Array to Binary Search Tree(Array; Divide-and-Conquer, dfs)

    Given an array where elements are sorted in ascending order, convert it to a height balanced BST. 思路 ...

  3. Unity中Avatar换装实现

    http://www.cnblogs.com/herenzhiming/articles/6533162.html

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

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

  5. 541. Reverse String II 指定翻转前k个的字符串

    ［抄题］: Given a string and an integer k, you need to reverse the first k characters for every 2k chara ...

  6. IIS7日志中时间与系统时间不一致的原因

    最近在分析web日志,发现IIS7日志中时间与系统时间不一致,即本该上班时间才产生的产并发访问日志,全部发生在凌晨至上班前. 本以为是系统时间设置错误,检查后一切正常.后查询资料,原来是这个原因: 日 ...

  7. [C++] Sign and magnitude,Ones' complement and Two's complement

    Sign and magnitude,Ones' complement and Two's complement

  8. js闭包原理与例子[转]

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.闭包原理: 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域 ...

  9. 【转】OJ提交题目中的语言选项里G++与C++的区别

    原文链接:http://blog.polossk.com/201405/c-plus-plus-g-plus-plus G++? 首先更正一个概念,C++是一门计算机编程语言,G++不是语言,是一款编 ...

  10. .NET开源MSSQL、Redis监控产品Opserver之MSSQL配置

    MSSQL的配置比较简单,主要包括三部分: 默认配置(defaultConnectionString).集群配置(clusters).单实例配置(instances) defaultConnectio ...