实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶。

话不多说了,代码如下:

window.onscroll = function () {
var scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条的垂直偏移
if (scrollT > xx) { //xx为临界的垂直位移值
//修改导航栏的样式,让他呈现吸顶的状态 主要是position:fixed;
} else {
//删除吸顶的样式,恢复正常的样式
}
};

是不是十分的简单,快去试试吧!

原生js实现导航栏吸顶的更多相关文章

  1. Vue 事件监听实现导航栏吸顶效果(页面滚动后定位)

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  2. JS面向对象方法(一): 使用原生JS 实现导航栏下多级分类弹出效果

    利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...

  3. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  4. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  5. js动态控制导航栏样式

    导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...

  6. JS自适应导航栏,菜单栏

    1. 打开 https://github.com/VPenkov/okayNav下载源代码 2.引入两个css样式 <link rel="stylesheet" href=& ...

  7. react.js中实现tab吸顶效果问题

    在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...

  8. adjustResize模式下ExpandaleListView中输入框焦点错乱及布局底部的导航栏被顶在键盘上方的处理

    为了更好的用户体验,煎熬了许久,得到这么个解决方案.在此记录下来,以供后来者参考. 第一部分 清单文件中组件activity的android:windowSoftInputMode属性值的含义: [A ...

  9. js滑动导航栏点击后居中效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java 多线程练习

    题目:某公司组织年会,会议入场时有两个入口,在入场时每位员工都能获取一张双色球彩票,假设公司有100个员工,利用多线程模拟年会入场过程, 并分别统计每个入口入场的人数,以及每个员工拿到的彩票的号码.线 ...

  2. Kubernetes 系列(七):持久化存储StorageClass

    前面的课程中我们学习了 PV 和 PVC 的使用方法,但是前面的 PV 都是静态的,什么意思?就是我要使用的一个 PVC 的话就必须手动去创建一个 PV,我们也说过这种方式在很大程度上并不能满足我们的 ...

  3. 中缀表达式转后缀表达式(Java代码实现)

    后缀表达式求值 后缀表达式又叫逆波兰表达式,其求值过程可以用到栈来辅助存储.例如要求值的后缀表达式为:1 2 3 + 4 * + 5 -,则求值过程如下: 遍历表达式,遇到数字时直接入栈,栈结构如下 ...

  4. jobs后台任务

    前台作业:占据了命令提示符,就是你当前可以操作的作业后台作业:启动之后,释放命令提示符,后续的操作在后台完成 前台——>后台 ctrl+z:把正在前台的作业送往后台,这时作业的状态是暂停. CO ...

  5. 主动降噪技术(ANC)的前生今世–行业分析

    一 原始玩家 1978年,创始人Amar G. Bose博士在从欧洲飞往波士顿的飞机上,发现飞机引擎的噪音扫净了他戴耳机欣赏音乐的兴致.这激发了他在BOSE公司进行一项消噪科技的研究.弹指之间,十年过 ...

  6. springcloud --- spring cloud sleuth和zipkin日志管理(spring boot 2.18)

    前言 在spring cloud分布式架构中,系统被拆分成了许多个服务单元,业务复杂性提高.如果出现了异常情况,很难定位到错误位置,所以需要实现分布式链路追踪,跟进一个请求有哪些服务参与,参与的顺序如 ...

  7. ELK 学习笔记之 Logstash之inputs配置

    Logstash之inputs配置: input plugin doc: https://www.elastic.co/guide/en/logstash/current/index.html 插件很 ...

  8. java中的左移运算符<<

    System.out.println(3<<4);//48 相当于3乘以2的4次方 将一个数左移n位,就相当于乘以了2的n次方 位运算cpu直接支持的,效率最高

  9. 04-02 AdaBoost算法

    目录 AdaBoost算法 一.AdaBoost算法学习目标 二.AdaBoost算法详解 2.1 Boosting算法回顾 2.2 AdaBoost算法 2.3 AdaBoost算法目标函数优化 三 ...

  10. 用java求整数和

    public class JavaAppArguments {      /**      * @param args     */       public static void main(Str ...