【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> ...
随机推荐
- VS打包程序步骤
1.下载打包的程序 2.在你的程序里面安装打包的项目 3.添加项目输出 4.为项目添加必要的文件 双击前面建立好的主输出 一般文件为一些配置文件(如使用Nlog写日志,需要添加Nlog的配置文件)和图 ...
- H5_0020:判断安卓苹果平台
var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.indexOf('Android') > - ...
- CodeForces - 651C Watchmen (去重)
Watchmen are in a danger and Doctor Manhattan together with his friend Daniel Dreiberg should warn t ...
- scanf使用尿性
scanf("xxx%d",&xx); "xxxx%d" 这里不能乱写,这里是标准输入,不然xx的一直不对,和printf不一样,而且%d 和& ...
- Pandownload---windows下几乎无敌的网盘下载神器
近几天光顾着mac了,今天咱来聊聊Windows. 这个就不多说了,直接贴图. 网页版截图. 电脑版截图. 网页版2020.2.1的时候是失效的,别问我为什么不现在测试,用不着. 不用担心不知道密码, ...
- Mac配置环境变量时终端显示bash-3.2解决方案
1.问题描述 (base) -bash-3.2$ vi ~/.bash_profile (base) -bash-3.2$ source ~/.bash_profile 2.解决方案 无授权转,侵权删 ...
- c++ 踩坑大法好 枚举
1,枚举是个啥? c++允许程序员创建自己的数据类型,枚举数据类型是程序员自定义的一种数据类型,其值是一组命名整数常量. ,wed,thu,fri,sat,sun}; //定义一个叫day的数据类型, ...
- ubuntu apt 换源
修改配置文件/etc/apt/sources.list 内容替换为 阿里镜像源 deb http://mirrors.aliyun.com/ubuntu/ vivid main restricted ...
- C++-POJ2777-Count Color[线段树][lazy标记][区间修改]
分析:https://www.bilibili.com/read/cv4777102 #include <cstdio> #include <algorithm> using ...
- 杭电oj 2098——分拆素数和(包含如何判断质数及优化),java实现
question:分拆素数和 思路: 1.首先从1一直遍历到数据的1/2位置(因为后面的会和前面的重复),因为是要两个数,所以另一个数就是原数据减去遍历的数字(即i 和data-i),如果二者同时为质 ...