<html>

<head>

    <title>test</title>

</head>

<body>

    <div style="position: fixed; height: 200px; background: red; width: 100%; display: none" id="topbar"></div>

    <div style="height: 3000px;">content</div>

</body>

<script type="text/javascript">

    window.onscroll = function () {

        var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        var node = document.getElementById('topbar');

        if (top > 500) {//500就是滚动条滚动到的位置，大于500才显示

            node.style.display = 'block';

        } else {

            node.style.display = 'none';

        }

    }

</script>

</html>

【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示的更多相关文章

  1. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  2. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  3. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  4. 用sticky.js实现头部导航栏固定

    在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...

  5. 前端 ---- js 模拟百度导航栏滚动案例

    模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. windows 10 删除资源管理器导航栏 Creative Cloud Files

    安装完Adobe的Photoshop.After Effects等软件后,资源管理器导航栏会出现让人讨厌的Creative Cloud Files目录,稍微修改注册表即可删除. 快捷键Windows ...

  7. 完美解决Bootstrap4 导航栏 fixed-top 后，锚点定位时遮挡问题

    利用锚点改变事件\(onhashchange\),使用jQuery的\(scrollTop\)向前滚回导航栏的高度(比如我的100个像素) HTML: <body onhashchange=&q ...

  8. HTML+CSS实现导航栏二级下拉菜单完整代码

    工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  9. js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据

    防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...

随机推荐

  1. 安卓控件支持HTML标签

    http://www.cnblogs.com/xqxacm/p/5092557.html

  2. 编译安装了的nginx 添加http_ssl_module模块

    1.看下编译安装nginx的时候,都编译安装的哪些模块. [root@zabbix ~]# /usr/local/nginx/sbin/nginx -V nginx version: nginx/1. ...

  3. JavaScript高程第三版笔记-DOM扩展

    在那个刀耕火种的年代,用过jQuery的都体会到了jQuery带来的便捷,尤其是元素选择器. jQuery(www.jquery.com)的核心就是通过 CSS 选择符查询 DOM 文档取得元素的引用 ...

  4. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  5. 【POJ - 1970】The Game（dfs）

    -->The Game 直接中文 Descriptions: 判断五子棋棋局是否有胜者,有的话输出胜者的棋子类型,并且输出五个棋子中最左上的棋子坐标:没有胜者输出0.棋盘是这样的,如图 Samp ...

  6. 使用国内镜像给ROS安装提速

    大半年没写博客了.最近有幸参与机器人导航研究,在学习ROS相关知识.在安装ROS时使用国外的官方源安装非常慢.这里把使用国内镜像的安装方式做一个记录. 笔者用的是Kinetic版本,操作系统是Ubun ...

  7. Leetcode之动态规划（DP）专题-486. 预测赢家（Predict the Winner）

    Leetcode之动态规划(DP)专题-486. 预测赢家(Predict the Winner) 给定一个表示分数的非负整数数组. 玩家1从数组任意一端拿取一个分数,随后玩家2继续从剩余数组任意一端 ...

  8. C++学习笔记-继承中的构造与析构

    C++存在构造函数与析构函数,继承中也存在构造和析构函数.继承中的构造和析构函数与普通的构造析构有细微差别. 赋值兼容性原则 #include "iostream" using n ...

  9. JS小时倒计时

    let t1 = new Date("2019-11-26 15:51:00");// 从什么时间开始 let t2 = ));// 延迟几个小时 let interval = w ...

  10. SpringBoot整合MyBatis完成添加用户

    怎么创建项目就不说了,可以参考:https://www.cnblogs.com/braveym/p/11321559.html 打开本地的mysql数据库,创建表 CREATE TABLE `user ...