<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. 转：获取windows凭证管理器明文密码

    1.运行cmdkey /list查看windows保存凭证 方法1.mimikaz mimikatz vault::cred 2.利用powershell尝试获取 windows 普通凭据类型中的明文 ...

  2. linux中查找命令find、locate、whereis、which、type的区别

    find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件.与查询数据库(/var/lib/locatedb)文件不同,find查找的是磁盘空间. locate locate命令其实 ...

  3. DP————最小覆盖问题

    原题:https://www.luogu.org/problem/P2279 题解转载自:https://www.luogu.org/blog/contributation/solution-p227 ...

  4. Windows Server 2019远程桌面服务配置和授权激活

    参考Windows Server 2016远程桌面服务配置和授权激活方法可适用于Windows Server 2019     Server 2016默认远程桌面连接数是2个用户,如果多余两个用户进行 ...

  5. 攻防世界新手Misc writeup

    ext3 在Linux,使用root账户挂载linux文件,打开后使用find *|grep flag查找到一个flag.txt,打开后是base64编码,解码获得flag. give_you_fla ...

  6. POJ1041 John's trip 【字典序输出欧拉回路】

    题目链接:http://poj.org/problem?id=1041 题目大意:给出一个连通图,判断是否存在欧拉回路,若存在输出一条字典序最小的路径. 我的想法: 1.一开始我是用结构体记录边的起点 ...

  7. Linux下使用 minicom 自动重复发送数据的实现

    目录 在minicom中添加脚本路径 编写脚本 执行脚本 一个项目里要用的设备需要用串口来模拟传感器来测试,还是Linux下的. 串口助手cutecom很好用,但是不能定时发送数据. 所以用下面这个脚 ...

  8. [计蒜客T2237]魔法_树

    魔法 题目大意: 数据范围: 题解: 这个题挺好玩的 可以用反证法,发现所有叶子必须都得选而且所有叶子都选了合法. 故此我们就是要使得,一次操作之后使得叶子的个数最少. 这怎么弄呢? 我们发现,如果一 ...

  9. PTA(Advanced Level)1075.PAT Judge

    The ranklist of PAT is generated from the status list, which shows the scores of the submissions. Th ...

  10. Design Linked List

    Design your implementation of the linked list. You can choose to use the singly linked list or the d ...