<!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: #DC7E2D;

        margin-top: 30px;

        position: fixed;

        bottom: 0;

        left: 0;

        width: 100%;

        z-index: 9

    }

    </style>

</head>

<body>

    <div style="height:300px;background-color: #3045A4"></div>

    <div style="height:100px;background-color: #3E41D6"></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>

    window.onscroll = function() {

        var btn = document.getElementById('btn');

        var scrollTop = document.body.scrollTop || (document.documentElement && document.documentElement.scrollTop);

        if (scrollTop >=300) {

            btn.style.display = 'none';

        } else{

            btn.style.display = 'block';

        }

    }

    </script>

</body>

</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. 如何建立ElasticSearch里的mappings？

    刚接触elasticsearch,好多东西都不会用,百度了很多,都看不懂,终于摸索出了最简单的通过http建立mappings的方法~ 有人在建立mappings报各种错误,首先,如果你的这个索引中已 ...

  2. 微服务性能优化之thrift改造

    在我当前所做的web项目中,采用前后端分离模式前端通过Django 提供restful接口,后端采用微服务架构,微服务之间的调用采用jsonrpc,由于微服务之间的调用很频繁,导致前端得到的响应很慢, ...

  3. Python实现七牛云视频播放

    这篇文章是使用Python的Web框架Django Rest Framework来提供视频相关的api接口,主要功能包括视频上传.视频转码.视频访问授权.删除视频文件.视频截图功能. 七牛云上的基本概 ...

  4. lucene4

    在lucene通过对应的API建立索引.在学习的过程中我们了解到lucene下面索引的建立与关系数据库有相似的地方. IndexReader.delete删除有两种删除的形式. 第三个改变Docume ...

  5. 【CodeForces - 235C】Cyclical Quest 【后缀自动机】

    题意 给出一个字符串s1和q个询问,每个询问给出一个字符串s2,问这个询问的字符串的所有不同的周期串在s1中出现的次数的和. 分析 对于s1建后缀自动机.对于询问的每个字符串s2,我们按照处理循环串的 ...

  6. redis 常用方法整理

    1.进入redis redis-cli -p -h 192.168.0.100 -a q9pCeAEMAWEL 2.查询keys keys activity_mobile_* 3.赋值.查值.删除 s ...

  7. oracle的约束隐式创建索引和先索引后约束的区别

    oracle的约束隐式创建索引和先索引后约束的区别 两种情况:1.对于创建约束时隐式创建的索引,在做删除操作的时候: 9i~11g都会连带删除该索引 2.对于先创建索引,再创建约束(使用到此索引)这种 ...

  8. fseek效率

    http://www.zhihu.com/question/36675524?sort=created C++怎样读取文件才有最快的速度 获取文件大小,然后分配相应大小的内存,一次性读取文件到此内存 ...

  9. sqlserver分区表索引

    对于提高查询性能非常有效,因此,一般应该考虑应该考虑为分区表建立索引,为分区表建立索引与为普通表建立索引的语法一直,但是,其行为与普通索引有所差异. 默认情况下,分区表中创建的索引使用与分区表相同分区 ...

  10. p2319 [HNOI2006]超级英雄

    传送门 分析 从1道m进行匹配,找到第一个不能继续匹配的点即可 代码 #include<iostream> #include<cstdio> #include<cstri ...