<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. SQL Server 时间戳与时间格式互相转换

    时间戳(Unix timestamp) 是一种时间表示方式,定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数. Unix时间戳不仅被使用在Unix系统.类Unix系统中,也 ...

  2. SpringBoot： 1.创建第一个SpringBoot项目（转）

      一.新建项目 二.打开项目的pom文件,在里面添加maven依赖 1 <!--springboot项目依赖的父项目--> 2 <parent> 3 <groupId& ...

  3. SLC cache功能

    由于TLC需要多次编程,且未全部编程时wordLine处于不稳定状态,所以一般都会划出一部分区域作为SLC cache使用 SLC cache主要功能是,SSD接收到写命令后,先将数据写入SLC ca ...

  4. 【转】C# DataTable 导出 Excel 进阶 多行表头、合并单元格、中文文件名乱码

    本文原创地址:http://blog.csdn.net/ranbolwb/article/details/8083983 ,转载请保留本行. 本例子是上一篇 DataTable 导出 Excel 的进 ...

  5. vue-router跳转相同路径报错

    import Vue from 'vue' import Router from 'vue-router' // hack router push callback const originalPus ...

  6. gcc5+opencv4.0.1 "玄学"bug记录

    近期需要使用OpenCV中的gpu加速的一些函数,需要重新编译OpenCV库文件. 由于本机安装的cuda9.0对编译器gcc的版本有要求,平时常用的gcc7.0用不了,所以选用了gcc5.5 . O ...

  7. 减2或减3（很搞的贪心）2019牛客国庆集训派对day6

    题意:https://ac.nowcoder.com/acm/contest/1111/D 问你先减二x次的情况下,最少减几次3. 思路: %3不为0的要先减2,然后%3为0的要先减大的(比如9 3 ...

  8. 安装 pybloomfilter

    1.在windows的cmd下,使用 pip install pybloomfiltermmap 命令安装,pybloomfiltermmap 时报错 ,错误信息如下 根据错误信息分析,报错原因是需要 ...

  9. T100——q查询，子母查询（汇总——明细）练习笔记

    范例: 代码: #add-point:input段落 name="ui_dialog.input" INPUT BY NAME g_master.bdate,g_master.ed ...

  10. 使用iview ui库 [vue/no-parsing-error] Parsing error: x-invalid-end-tag报错

    打开设置,搜索“vetur.validation.template”,设置完毕之后记得重启vscode 如果不行请使用下边方法 一. 问题日志 ✘ https://google.com/#q=vue% ...