<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. java创建和解析json对象

    最近工作遇到了 json 解析的相关需求,整理下 JSONObject 相关操作. 文中使用的例子都是基于阿里巴巴的产品 FastJSON ,涉及到的包有: import com.alibaba.fa ...

  2. 转：微服务框架之微软Service Fabric

    常见的微服务架构用到的软件&组件: docker(成熟应用) spring boot % spring cloud(技术趋势) Service Fabric(属于后起之秀 背后是微软云的驱动) ...

  3. FUZZ测试简介

    基本思想:利用黑盒方法,发送大量恶意/随机数据到被测试系统,通过监视系统运行过程中的异常,来发现应用程序中可能存在的安全问题.

  4. Attention is all you need 详细解读

    自从Attention机制在提出之后,加入Attention的Seq2Seq模型在各个任务上都有了提升,所以现在的seq2seq模型指的都是结合rnn和attention的模型.传统的基于RNN的Se ...

  5. 【ARM-Linux开发】linux下Eclipse进行C编程时动态链接库的生成和使用

    linux下Eclipse进行C编程时动态链接库的生成和使用 引用 http://linux.chinaitlab.com/soft/864157.html 欢迎进入Linux社区论坛,与200万技术 ...

  6. 【C/C++开发】__stdcall,__cdecl,__fastcall的区别

    __stdcall和__cdecl的区别 __stdcall和__cdecl是两种函数名字修饰.(注意是连续的两个下划线) Windows上 windows上不管是C还是C++,默认使用的都是__st ...

  7. C# String与Byte数组的转换

    string转byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes(str); byte[] byteArray = Enc ...

  8. 菜鸟系列Fabric——Fabric 私密数据（6）

    Fabric 私密数据 1.私密数据的定义 如果某个渠道上的一组组织需要将数据与该渠道上的其他组织保密,他们可以选择创建一个仅包含需要访问数据的组织的新渠道.但是,在每种情况下创建单独的通道会产生额外 ...

  9. Design Log Storage System

    You are given several logs that each log contains a unique id and timestamp. Timestamp is a string t ...

  10. Spring系列二：IoC 容器

    还君明珠双泪垂,恨不相逢未嫁时. 概述 Spring IoC容器是Spring框架的核心.只需要进行简单的容器配置,就可以将创建对象,使用对象,销毁对象联系在一起,从而管理从创建对象到销毁对象的整个生 ...