JS 吸顶导航,告别“回到顶部”
时间:2022-05-04
本文章向大家介绍JS 吸顶导航,告别“回到顶部”,主要内容包括本文主要内容、2、吸顶导航的实现方法、3、小结、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
当我们浏览页面篇幅较大,浏览过半的时候想回到导航位置,只能通过往回滚动或通过”回到顶部”重新滚动到导航位置,这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式,吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前,为用户提供了极大的便利与交互体验。
本文主要内容
1、吸顶导航是什么
2、吸顶导航的实现方法
3、小结
1、吸顶条导航是什么
如图:
吸顶导航栏的初始位置一般是靠近在页面的顶部位置,但是又存在一定距离,通常这块区域放置最为醒目或者重要元素的地方,如Banner图。
当页面向下滚动时超过了吸顶导航的初始位置时,需要把吸顶导航栏固定在窗口顶部,一般吸顶导航栏还可以替换成文章标题栏,搜索框、tab条等等,例如百度糯米,天猫,淘宝最为常用。它们共同点是在内容或者功能上比较重要,但又不是最重要的元素,最重要的一般会放置于顶部。明白了吸顶导航条的基本效果,下面写个简单的demo吧。
2、吸顶导航的实现方法
一、样式结构搭建
考虑到触发吸顶功能,需要为导航条设置触发后的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#nav {
width: 100%;
height: 60px;
background: #39f;
color: #fff;
line-height: 60px;
text-align: center;
padding: 0;
margin: 0;
list-style: none;
}
#nav li{
float: left;
width: 25%;
height: 60px;
}
.fix {
position: fixed;
top: 0;
left: 0;
}
</style>
<body>
<div class="wrap">
<h1>H5-学堂</h1>
<p>HTML5学堂是一个热爱H5的讲师组成的组织,致力于构建一个前端、HTML5的分享平台,能够给学生提供一些资料,也为广大前端爱好者提供一个分享平台,其中涉及到的基本知识,JS底层知识,JS底层知识,面试真题、相关技术、未来发展等。</p>
<ul id="nav">
<li>HTML5学堂</li>
<li>HTML5微博</li>
<li>HTML5贴吧</li>
<li>HTML5微信</li>
</ul>
<div class="con">
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
<p>告别“回到顶部”,如影随行的“吸顶式导航”</p>
</div>
</div>
</body>
</html>
ps:内容区要够长,不然无法滚动。
二、吸顶功能添加
1.实现思路是监听 scroll 事件,判断当前页面的滚动位置,当滚动距离大于导航条距顶部的距离时,为导航条采用窗口定位。
2.与“回到顶部“的实现方法一样,但是会发现实现吸顶功能时,到了临界位置时,页面会抖动一下,因为当导航条fixed出去,下部内容填补了导航条离开的位置。抢占了导航条的位置,所以抖动了一下。此处我们设置一个占位符,守住导航条的位置。
<script>
var tit = document.getElementById('nav');
// 占位符设置
var rect = tit.getBoundingClientRect();//获得页面中导航条相对浏览器视窗的位置。
var inseDiv = document.createElement('div');
tit.parentNode.replaceChild(inseDiv, tit);
inseDiv.appendChild(tit);
inseDiv.style.height = rect.height + 'px';
// 获取导航条距页面顶部的距离
var titTop = tit.offsetTop;
//设置滚动监听事件
document.onscroll = function() {
//获取当前滚动距离
var btop = document.body.scrollTop || document.documentElement.scrollTop;
//如果滚动距离大于导航条距顶部距离
if (btop > titTop) {
//为导航条设置fixed
tit.className = "clearfix fix";
}else {
//移出fixed
tit.className = "clearfix";
}
}
</script>
实现效果:
3、小结
吸顶导航的交互方式极大的提高了用户体验,是电商网站网站最常用的交互效果之一,希望本文能给大家带来一些帮助。
- 程序员的暴力美学
- Reactor模式的.net版本简单实现--DEMO
- 能花钱的,就不要花时间
- Lombok介绍、使用方法和总结
- JDK1.7源码分析01-Collection
- Spring boot自定义启动字符画(banner)
- 产品解析:Github Atom
- Docker+Jenkins持续集成环境(5): android构建与apk发布
- Docker+Jenkins持续集成环境(4):使用etcd+confd实现容器服务注册与发现
- 易企秀前端压缩源码分析与还原
- 关于 JS 拖拽功能的冲突问题及解决方法
- 使用 SVG 和 JS 创建一个由星形变心形的动画
- 如何使用 Bootstrap 搭建更合理的 HTML 结构
- Java遍历Map对象的四种方式
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL 百万级数据量分页查询方法及其优化
- 教你设计一个超牛逼的本地缓存!
- Flutter延时任务、Flutter通过Future与Timer实现延时任务
- DDIA 笔记
- 工作流和状态机
- CentOS 6.x 搭建:Headless Chrome + ChromeDriver + Selenium的爬虫环境系统
- 聊聊dubbo-go的registryAwareCluster
- 同样是空值,null和undefined有什么异同?
- 强大到没朋友的mysql-shell及插件
- android JavaPoet记录
- JavaScript里的分号,你加还是不加?
- 技术干货 | Docker 容器逃逸案例汇集
- 一张千万级别数据的表想做分页,如何优化?
- 一文学会爬虫技巧
- 为什么机器学习应用交易那么难(中)