【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> ...
随机推荐
- Python-Django学习笔记(四)-views的编写以及urls分发器的配置
MTV中的V表示的是Views,视图函数(或简称视图)只是一个Python函数,它接受Web请求并返回Web响应. 通俗的理解可以理解为后端控制器. (响应可以是网页的HTML内容,重定向,404错误 ...
- arm的字节对齐问题总结(转)
问题由来:pc的lsb总是0,因为代码至少要字对齐.cm3的指令至少是半字对齐的(16) 一.啥是字对齐?为啥要字对齐? 现代计算机中内存空间都是按照byte划分的,从理论上讲似乎对任何类型的变量的访 ...
- 常用命令 在linux下
1.拷贝某个目录及其下的所有的文件到另外一个目录 语法:cp -r <source directory name>/ <destination directory name>/ ...
- CSS-使用CSS样式的方式
1.HTML<!DOCTYPE>声明标签 (1)定义和用法 <!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前. <!DOCTYPE ...
- python之爬虫(爬取.ts文件并将其合并为.MP4文件——以及一些异常的注意事项)
//20200115 最近在看“咱们裸熊——we bears”第一季和第三季都看完了,单单就第二季死活找不到,只有腾讯有资源,但是要vip……而且还是国语版……所以就瞄上了一个视频网站——可以在线观看 ...
- 2.Ubuntu安装 Docker
平台支持 Docker CE 支持多种平台,如下表所示 桌面 平台 架构 Docker Desktop for Mac (macOS) X64 Docker Desktop for Windows ( ...
- Eclipse创建JSP、HTML、CSS文件默认字符集设置成UTF-8
问题:在使用eclipse的时候总是发现新创建的JSP文件.HTML文件等默认总是ISO-8859-1,每次都要修改成自己使用的utf-8的,很是麻烦,因此在网上查看了一下发现是可以修改字符集的默认值 ...
- navicat异常 - 1130-host ... is not allowed to connect to this MySql server
错误描述 用navicat连接数据库报错:1130-host ... is not allowed to connect to this MySql server如何处理 解决方案 1.连接服务器: ...
- PolandBall and Forest
PolandBall lives in a forest with his family. There are some trees in the forest. Trees are undirect ...
- 小匠第二周期打卡笔记-Task04
一.机器翻译及相关技术 机器翻译(MT):将一段文本从一种语言自动翻译为另一种语言,用神经网络解决这个问题通常称为神经网络翻译(NMT). 主要特征:输出是单词序列而不是单个单词.输出序列的长度可能与 ...