原生js实现导航栏吸顶
实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶。
话不多说了,代码如下:
window.onscroll = function () {
var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的垂直偏移
if (scrollT > xx) { //xx为临界的垂直位移值
//修改导航栏的样式,让他呈现吸顶的状态 主要是position:fixed;
} else {
//删除吸顶的样式,恢复正常的样式
}
};
是不是十分的简单,快去试试吧!
原生js实现导航栏吸顶的更多相关文章
- Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果
利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- 在UWP中页面滑动导航栏置顶
最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...
- js动态控制导航栏样式
导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...
- JS自适应导航栏,菜单栏
1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- adjustResize模式下ExpandaleListView中输入框焦点错乱及布局底部的导航栏被顶在键盘上方的处理
为了更好的用户体验,煎熬了许久,得到这么个解决方案.在此记录下来,以供后来者参考. 第一部分 清单文件中组件activity的android:windowSoftInputMode属性值的含义: [A ...
- js滑动导航栏点击后居中效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 深入MYSQL随笔
(1)查询生命周期:从客户端到服务器,然后在服务器上进行解析,生成执行计划,执行,并返回给客户端.执行是整个生命周期中,最重要的阶段. (2)慢查询基础:优化数据访问,减少访问的数据行. (3)查询不 ...
- 如何制作一个Nginx镜像
1,从这里你将学到编写Dockerfile的4个重要指令RUN,EXPOSE,ADD,ENTRYPOINT2,在Dockerfile中编写拷贝文件至容器的方法3, 安装一个nginx server,并 ...
- Shell之脚本检查与调试
目录 Shell之脚本检查与调试 参考 脚本语法检查 脚本运行调试 Shell之脚本检查与调试
- 虚拟现实中的Motion Sickness晕动症问题 - VIMS
虚拟现实(VR)中的晕动症 - VIMS 在玩VR的时候,很多玩家都遇到过发晕恶心等症状,这就是晕动症(Motion Sickness,以下或简称MS).MS并不是VR特有的问题.我们在坐船.坐车.坐 ...
- win10 cnpm安装完之后一直说不是内部命令的原因
找到cnpm的默认安装路径 一般默认的是 D:\Program Files\nodejs\node_modules 然后添加环境变量中 win10是在系统环境变量中切记不是在用户变量中.保存之后,重新 ...
- Mysql高手系列 - 第21篇:什么是索引?
Mysql系列的目标是:通过这个系列从入门到全面掌握一个高级开发所需要的全部技能. 这是Mysql系列第21篇. 本文开始连续3篇详解mysql索引: 第1篇来说说什么是索引? 第2篇详解Mysql中 ...
- 快学Scala 第二十课 (trait的构造顺序)
trait的构造顺序: 首先调用超类构造器 特质构造器在超类构造器之后,类构造器之前执行 特质从左向右被构造 每个特质当中,父特质先被构造 如果多个特质共有一个父特质,而那个父特质已经被构造,则不会被 ...
- Laravel 5 中文文档 CHM 版
使用 Microsoft HTML Help Workshop 做了一个 Laravel 5.4 中文文档的 CHM 版本. 百度网盘下载地址:http://pan.baidu.com/s/1dFN2 ...
- UE制作PBR材质攻略Part 1 - 色彩知识
目录 一.前言 二.色彩知识 2.1 色彩理论 2.1.1 成像原理 2.1.2 色彩模型和色彩空间 2.1.3 色彩属性 2.1.4 直方图 2.1.5 色调曲线 2.1.6 线性空间与Gamma空 ...
- 安装web3失败问题
① 首先可以先通过 npm cache verify 清理下缓存,在进行安装 ② 如果还是安装失败可以尝试 --- npm install web3@^0.20.0 或者 npm install ...