【js】子菜单吸顶(滚动到一定距离 容器置顶)附 无间断置顶 避免闪动
思考逻辑:当向上滚动的高度>= 观察容器距离顶部高度 即可触发吸顶
以下代码在vue工程,作参考
handleScroll () {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //向上滚动的高度
const offsetTop = document.querySelector('.swiper_con').offsetTop //观察容器距离顶部的高度
if (scrollTop > offsetTop) { //逻辑判断
this.isFixed = true
} else {
this.isFixed = false
}
}
记得在mounted 中加入监听事件
window.addEventListener('scroll', this.handleScroll)
附赠无闪烁(噱头 哈哈哈)
其实就是给内容容器一个padding-top,然后将子菜单 相对定位在内容容器中。上面代码中观察容器选用 内容容器的className。
【js】子菜单吸顶(滚动到一定距离 容器置顶)附 无间断置顶 避免闪动的更多相关文章
- Headroom.js – 快速响应用户的页面滚动操作
Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- js原生 + jQuery实现页面滚动字幕
js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...
- js实现车轮的来回滚动
最近喜欢用js做车轮的来回滚动,简单的js动画分享给大家.有什么建议记得说出来大家一起讨论哦!效果图如下: 源代码: <style> #pic1{ width:20px; height:2 ...
- JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- [JS]手动实现一个横屏滚动公告js插件
前言 工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写. 本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星) JS横屏滚 ...
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- js 实现图片的无缝滚动
js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...
随机推荐
- Selenium3+python自动化014-自动化常用设计模式页面对象模型 (Page Object)
一.概 念: PO(Page Object)设计模式是一种面向对象(页面对象)的设计模式,将测试对象及单个的测试步骤封装在每个Page对象中,以page为单位进行管理. 二.优点可以使代码复用,降低维 ...
- Real-time Compressive Tracking
这是RTC算法的文献blog Real-time Compressive Tracking Kaihua Zhang1, Lei Zhang1, Ming-Hsuan Yang2 1Dept. of ...
- 51Nod 1182 完美字符串 (贪心)
约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...
- 关于Oracle的使用
1.查看数据库 在sqlplus / as sysdba执行后,再执行select name from v$database; 2.执行1后继续查看该数据库下的表 select table_name ...
- Keep、小红书、美图…独角兽App能拿到新一轮救命钱吗?
大多数人热爱手机,不是因为时尚的外观或者结实的零部件,而是因琳琅满目的App赋予其太多的功能.智能手机最先是清理掉人类的零碎时间,现如今又开始肢解我们大块的时间,或者说,智能手机本身就是生活.在如此背 ...
- jquery tagsinput监听输入、修改、删除事件
个人博客 地址:http://www.wenhaofan.com/article/20181118192458 由于度娘上的根本搜不到对应的操作,连该插件对应的文档介绍都没有,不得已debug了源码才 ...
- pick the stone game
我该如何去触摸这类问题嘞! 取石子游戏 1堆石子有n个,两人轮流取. 先取者第1次可以取任意多个,但不能全部取完. 以后每次取的石子数不能超过上次取子数的2倍. 取完者胜.先取者负输出"Se ...
- liunx下安装Docker
1.安装并启动docker 1.检查内核版本,必须是3.10及以上uname -r2.安装docker yum install docker命令安装(需要联网) [root@localhost ~]# ...
- 理解 Oracle 多租户体系中(12c,18c,19c)创建用户作用域范围
本篇探讨以下几个问题:你可提前猜测下面6个场景语句中,哪几个可以成功创建用户? 1. 在CDB级别中创建公共用户,不带 container 子句的效果: 2. 在CDB级别中创建公共用户,带 cont ...
- 126. 单词接龙 II
题目: 链接:https://leetcode-cn.com/problems/word-ladder-ii/ 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出 ...