实现滑动滚动条让导航栏吸顶原理:主要是通过监听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. Linux 文件复制命令cp

    文件复制命令cp 命令格式:cp [-adfilprsu] 源文件(source) 目标文件(destination) cp [option] source1 source2 source3 ... ...

  2. spring5 源码深度解析----- AOP代理的生成

    在获取了所有对应bean的增强后,便可以进行代理的创建了.回到AbstractAutoProxyCreator的wrapIfNecessary方法中,如下所示: protected static fi ...

  3. 如何决定使用 HashMap 还是 TreeMap?

    问:如何决定使用 HashMap 还是 TreeMap? 介绍 TreeMap<K,V>的Key值是要求实现java.lang.Comparable,所以迭代的时候TreeMap默认是按照 ...

  4. Linux下beego及beego相关插件安装

    Linux下beego及beego相关插件安装 1.下载及配置go环境看见链接: http://golang.org/dl/ 网盘:链接: https://pan.baidu.com/s/1MveUM ...

  5. Docker service update更新不成功的问题

    一.基本信息 1.Docker版本 [root@ip---- ~]# docker --version Docker version , build a872fc2f86   2.系统版本 [root ...

  6. 02-23 决策树CART算法

    目录 决策树CART算法 一.决策树CART算法学习目标 二.决策树CART算法详解 2.1 基尼指数和熵 2.2 CART算法对连续值特征的处理 2.3 CART算法对离散值特征的处理 2.4 CA ...

  7. 算法学习之剑指offer(十)

    一 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2","-123","3 ...

  8. luogu P4035 [JSOI2008]球形空间产生器

    [返回模拟退火略解] 题目描述 今有 n+1n+1n+1 个 nnn 维的点,它们都在一个球上.求它们所在球的球心. Solution 4035\text{Solution 4035}Solution ...

  9. 关于_GNU_SOURCE宏

    是在features.h中用于特性控制的一个功能测试宏 /user/include/features.h /* If _GNU_SOURCE was defined by the user, turn ...

  10. UI测试之元素定位

    定位方式优先级选择:  ID>Name>CSS>XPath 1.使用id定位 2.使用name定位 3.使用class定位 4.使用css选择器定位 示例xml: <?xml ...