JS技法-页面悬浮导航

J

S

页面悬浮导航

在很多长页面中,为了让导航条总是显示在可视范围内,需要让导航条悬浮。

HTML:

页面悬浮导航

导航1导航2导航3

欢迎来到张小帅日常!

CSS:

JS:

温馨

提醒

css样式中,最核心的就是动态添加类,先写出".fix"样式,通过后面的JS进行触发。

◊JS代码13行,通过判断导航条距顶部大小与滚动距离的关系,进行固定类的触发。当前者小于后者,不触发固定操作;反之,触发固定".fix"样式生效。

代码链接:https://pan.baidu.com/s/1cnvXYcKPjT-CJo_EjzjRXQ 密码:9sjc

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180427G0UM9X00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券