<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日志体系（七）日志框架切换

    通过 SLF4J 统一日志 在实际的日志转换过程中,SLF4J其实是充当了一个中介的角色.例如当我们一个项目原来是使用LOG4J进行日志记录,但是我们要换成LogBack进行日志记录. 此时我们需要先 ...

  2. strcpy函数内存分析

    void strcpy(char* strDest, char* strSrc) { while((*strDest++ = *strSrc++) != '\0'); } 看上面这段代码,只有一条语句 ...

  3. 【并行计算-CUDA开发】从熟悉到精通 英伟达显卡选购指南

    举报 说到显卡,就不免令人想到英伟达和AMD两家面向个人消费级和企业级最大的显示芯片生产企业,英伟达和AMD,今天小编为大家简单的介绍一下英伟达的显卡选购方面的攻略,为一些想要购买显卡的用户提供一些参 ...

  4. python下对目录&文件的操作

    Windows桌面上: 总文件夹 子文件夹01 文档01.txt-------------------------------------------------------------------- ...

  5. Node原生demo

    1.=>创建配置模块,作用是先判断是开发环境还是生产环境,并将开发或生产环境的数据库信息和http信息分别筛开,便于选择 2.=>创建数据库模块,作用是连接数据库 3.=>创建路由模 ...

  6. [转帖]使用Gnome文件管理器连接到服务器：FTP/SFTP、Samba、NFS的方法

    使用Gnome文件管理器连接到服务器:FTP/SFTP.Samba.NFS的方法 2019-05-09 16:28:44作者:雷增线稿源:云网牛站 https://ywnz.com/linuxyffq ...

  7. 小记--------spark的两种提交模式

    spark的两种提交模式:yarn-cluster . yarn-client 图解

  8. 1-N（1的总数）找规律

    见:https://blog.csdn.net/dormousenone/article/details/75208903 #define IOS ios_base::sync_with_stdio( ...

  9. PHP生成中文验证码并检测对错实例

    PHP生成中文验证码并检测对错实例,中文验证码的例子还是比较少的,今天给大家分享一下,支持自定义中文.字体.背景色等 生成验证码,注意font字体路径要对,否则显示图片不存在 session_star ...

  10. 从入门到自闭之Python--RESTful API规范与序列化

    RESTful API规范 REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fieldi ...