Javascript特效：吸顶

知识点

scroll家族和offset家族的结合运用
当nav的offsetTop大于屏幕卷去高度的时候，进行吸顶
添加一个固定类，如果满足条件，为nav加类名

运行效果

滚动页面时，保证导航栏吸顶

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;list-style: none;border:none}img{vertical-align: top;width: 100%;}section{width: 70%;margin: 0 auto;}.nav{position: fixed;left: 0;top: 0;width: 100%}</style>
</head>
<body><header id="head"><img src="data:images/top.png" alt=""></header><nav id="nav"><img src="data:images/nav.png" alt=""></nav><section><img src="data:images/body01.png" alt=""><img src="data:images/body02.png" alt=""></section><script src="../../MyTools/MyTools.js"></script><script>window.addEventListener('load',function (ev) {// 1. 求出头部高度var navTopHeight = myTool.$('nav').offsetTop;// 2. 监听页面滚动window.addEventListener('scroll',function (ev1) {var scrollTopHeight = myTool.scroll().top;// 2.1 判断if(scrollTopHeight >= navTopHeight){myTool.addClassName(myTool.$('nav'),'nav')}else{myTool.removeClassName(myTool.$('nav'),'nav');}})})</script>
</body>
</html>

Javascript特效：吸顶相关推荐

php js特效代码如何用,Javascript实现吸顶特效（代码示例）
本篇文章给大家带来的内容是Javascript实现吸顶特效(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 知识点 1.scroll家族和offset家族的结合运用 2. ...
微信小程序-导航吸顶+view锚点
微信小程序--导航吸顶+view锚点导航栏滑动定位+view锚点效果图实现原理 WXML WXSS JS-主页面子页面-newcontent 导航栏滑动定位+view锚点我们在做小程序的时候 ...
导航栏吸顶 vs 滚动定位
需求描述: 实现导航滚动过banner之后吸顶,点击导航后定位到对应模块,滚动到对应模块后导航对应区域实现高亮效果~~~ html+css+js swiper+jq 使用html+swiper实现页面 ...
吸顶wifi_分享 | 酒店WiFi网络的三种部署模式
酒店的无线网络,在酒店部署移动网络业务的时候,很多酒店会发现实际效果远达不到预期.酒店员工和入住用户经常会抱怨无线网络不稳定.视频无限缓冲中.经常掉线--,那么今天我们来了解酒店无线网络的部署.一.影 ...
wangEditor 菜单栏随页面滚动位置改变（吸顶）问题解决
wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决参考文章: (1)wangEditor 菜单栏随页面滚动位置改变(吸顶)问题解决 (2)https://www.cnblogs.com/ ...
android 条件筛选吸顶,自定义吸顶LayoutManager
吸顶效果 RecyclerView已经成为在Android Native开发过程中的明星组件,出镜率超高,只要需要列表展示的内容,我们第一想到的就是使用RecyclerView.RecyclerVie ...
小程序菜单栏吸顶效果
需要用到页面滚动监听事件onPageScroll (e) { } //index.wxml<view class='{{typeFixed?"typefixed":" ...
Moo.fx 超级轻量级的 javascript 特效库
Moo.fx是一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用.它非常快.易于使用.跨浏览器.符合标准,提供控制和修改任何 ...
30秒实现Vue吸顶效果
酱酱,好久不见鸭! 前言:吸顶效果图: 1.滚动前: image.png 2.滚动中: image.png 3.滚动超过后: image.png 直观效果可参pc端微博左侧的信息栏第一步:html ...
Android两个tab吸顶,Android scrollView和viewpager嵌套指示器吸顶根据viewpager每
Android scrollView和viewpager嵌套指示器吸顶根据viewpager每 Android scrollView和viewpager嵌套指示器吸顶根据viewpager每个 ...

Javascript特效：吸顶

知识点

运行效果

代码

Javascript特效：吸顶相关推荐

最新文章

热门文章