【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> ...
随机推荐
- go append 函数常见操作
1. 将切片 b 的元素追加到切片 a 之后: a = append(a, b...) 2. 复制切片 a 的元素到新的切片 b 上: 1. b = make([]T, len(a)) 2. copy ...
- javascript初学笔记
基本语句 赋值条件循环语句 javascript异常处理语句 trycatchfinally语句 Error对象 throw语句 函数 定义 调用 嵌套函数 函数的嵌套定义 内置函数 匿名函数和Fun ...
- MySQL进阶之存储引擎MyISAM与InnoDB的区别
一.存储引擎(表类型) 通常意义上,数据库就是数据的集合,具体到计算机数据库可以是存储器上一些文件的集合或一些内存数据的集合.我们通常说的MySQL数据库.sql Server数据库等其实是数据库管理 ...
- KVM命令--使用篇(1)
1. KVM常见使用命令: 1.1 查看命令 列出所有虚拟机 virsh list --all 显示虚拟机信息 virsh dominfo vm_name 显示虚拟机内存和cpu使用情况 virsh- ...
- CodeForces 1144A
原题链接:https://vjudge.net/problem/CodeForces-1144A #include<bits/stdc++.h> using namespace std; ...
- Qtree3 - 树链剖分
打完以后才发现写复杂了……算了懒得改了 #include <bits/stdc++.h> using namespace std; ],fa[][],size[],wson[],vis[] ...
- linux - mysql - 卸载:RPM包安装方式的MySQL卸载
(1)检查是否安装了MySQL组件 [root@DB-Server init.d]# rpm -qa | grep -i mysql MySQL-devel-5.6.23-1.linux_glibc2 ...
- 自己动手系列----使用数组实现一个简单的Set
Set:注重独一无二的性质,该体系集合可以知道某物是否已近存在于集合中,不会存储重复的元素用于存储无序(存入和取出的顺序不一定相同)元素,值不能重复.主要有HashSet和TreeSet两大实现类. ...
- 【Python】成绩等级判断
score=eval(input("请输入成绩:\n")) if score>=60: grade="D" elif score>=70: grad ...
- 怎么编写API和或者自己不属于知识小案例demo程序
再使用一个函数,进行测试的调用,然后进行调用这样就不需要再为makefile什么,还有就是改什么鬼东西烦恼了. 然后把需要的功能进行分解就行了.