【2017-04-10】js来控制导航栏在滚动条拉到一定位置时显示
<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来控制导航栏在滚动条拉到一定位置时显示的更多相关文章
- iOS开发笔记13:顶部标签式导航栏及下拉分类菜单
当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...
- CSS 笔记——导航栏、下拉菜单、提示工具
8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...
- fullpage.js 结合固定导航栏—实现定位导航栏
开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...
- 用sticky.js实现头部导航栏固定
在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...
- 前端 ---- js 模拟百度导航栏滚动案例
模拟百度导航栏滚动监听 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- windows 10 删除资源管理器导航栏 Creative Cloud Files
安装完Adobe的Photoshop.After Effects等软件后,资源管理器导航栏会出现让人讨厌的Creative Cloud Files目录,稍微修改注册表即可删除. 快捷键Windows ...
- 完美解决Bootstrap4 导航栏 fixed-top 后,锚点定位时遮挡问题
利用锚点改变事件\(onhashchange\),使用jQuery的\(scrollTop\)向前滚回导航栏的高度(比如我的100个像素) HTML: <body onhashchange=&q ...
- HTML+CSS实现导航栏二级下拉菜单完整代码
工具是vs code 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- js防抖和节流优化浏览器滚动条滚动到最下面时加载更多数据
防抖和节流,主要是用来防止过于平凡的执行某个操作,如浏览器窗口变化执行某个操作,监听某个input输入框keyup变化,瀑布流布局时Y轴滚动,图片加载. js函数的防抖 经过一段事件才执行某个操作,如 ...
随机推荐
- SpringSecurity快速入门
作者:SingleXu 链接:https://www.jianshu.com/p/8212a559d633 来源:简书 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 简介 Sp ...
- Protel99SE推荐使用英文版
Protel99SE的汉化版功能并不全,最好还是用英文原版,功能是最齐全的.用英文版的软件其实也不难,有限的几个词,习惯就好了.
- 在VM虚拟机Windows Server r2上部署安装Microsoft Dynamics CRM 2016 步骤详解(一)
应公司需求,最近在学微软的Dynamics CRM.在搭建环境的过程中也遇到了一些雷坑,在这里分享一下安装部署过程当中所遇到的一些问题, 安装Microsoft Dynamics CRM 2016的几 ...
- C#大文件流式压缩加解密
* * , CancellationToken token=default) { try { FileStream zipStream = new FileStream(writeFile, File ...
- 多线程基础知识---join方法
join方法的作用 thread.join()方法用于把指定的线程加入到当前线程中,把当前线程的CPU执行时间让给另一个线程.比如在线程B中调用了线程A的Join()方法,直到线程A执行完毕后,才会继 ...
- SpringBoot起飞系列-拦截器和统一错误处理(七)
一.前言 在前边部分我们已经学会了基本的web开发流程,在web开发中,我们通常会对请求做统一处理,比如未登录的用户要拦截掉相关请求,报错页面统一显示等等,这些都需要配置,可以大大简化我们的代码,实现 ...
- PHP生成中文验证码并检测对错实例
PHP生成中文验证码并检测对错实例,中文验证码的例子还是比较少的,今天给大家分享一下,支持自定义中文.字体.背景色等 生成验证码,注意font字体路径要对,否则显示图片不存在 session_star ...
- 从入门到自闭之Python--MySQL数据库的多表查询
多表查询 连表: 内连接:所有不在条件匹配内的数据们都会被剔除连表 select * from 表名1,表名2 where 条件; select * from 表名1 inner join 表名2 o ...
- shell 选择打印部分输出内容
1. 根据进程pid查端口: lsof -i | grep pid 2. 根据端口port查进程(某次面试还考过): lsof -i:port 3. 根据进程pid查端口: netstat -n ...
- WPF 异步加载窗体
加载某个界面时,需要获取数据,而数据返回的时间比较长,这个时候可以异步加载界面. 1.在该窗体的加载事件(Load)中编写以下代码: new Thread(p=>{DataBinding();} ...