思考逻辑:当向上滚动的高度>= 观察容器距离顶部高度 即可触发吸顶

以下代码在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】子菜单吸顶(滚动到一定距离 容器置顶)附 无间断置顶 避免闪动的更多相关文章

  1. Headroom.js – 快速响应用户的页面滚动操作

    Headroom.js 是一个轻量级,高性能的JS插件(无依赖性!),允许你响应用户的滚动行为.Headroom.js 使您能够在适当的时候把元素融入视图,而其它时候让内容成为焦点.Headroom. ...

  2. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  3. js原生 + jQuery实现页面滚动字幕

    js原生/jQuery实现页面滚动字幕效果 17:45:49 在新闻列表或者文章列表信息等页面中很容易要求实现字幕滚动的效果,以下为简单的实现页面中滚动字幕的效果 1.jQuery实现页面滚动字幕效果 ...

  4. js实现车轮的来回滚动

    最近喜欢用js做车轮的来回滚动,简单的js动画分享给大家.有什么建议记得说出来大家一起讨论哦!效果图如下: 源代码: <style> #pic1{ width:20px; height:2 ...

  5. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  6. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  7. [JS]手动实现一个横屏滚动公告js插件

    前言 工作中要用到.在github上找的大部分都是竖屏滚动没办法只能自己手动写. 本来只是想随便实现一下的,结果一时兴起把它弄成了一个简单的小插件,开了个github仓库(希望路过点个星) JS横屏滚 ...

  8. 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

    Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...

  9. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

随机推荐

  1. C++中的IO类(iostream, fstream, stringstream)小结(转)

    原文地址:https://blog.csdn.net/stpeace/article/details/44763009

  2. C++野指针的存在方式和误区

    1. char* x;这样的一定是野指针,指针声明时要直接初始化!或者置null也行! 2. int main() { char *x=new char; delete x; cout<< ...

  3. C# 串口关闭时主界面卡死原因分析

    目录 问题描述 查找原因 SerialPort类Open()方法 SerialPort类Close()方法 死锁原因 解决死锁 总结 问题描述 前几天用SerialPort类写一个串口的测试程序,关闭 ...

  4. C++->二进制文件流的输入输出

    C++->文件流的输入输出 1.书本里以“简单事务处理”为例子,解析二进制输入输出文件流的read和write函数的使用,以及输入输出文件流 过程中指针的捕获.定位,文件流位置的判断,二进制文件 ...

  5. 大话STM32F103系统架构

    前言 许多像我一样的STM32初学者,都往往忽视了STM32系统架构的学习.这对于实际应用并没有啥大的影响,但是总感觉怎么学也无法看清STM32的全貌,所以本文我将带领大家一起厘清STM32F103的 ...

  6. 怎么压缩PPT大小?

    PPT体积过大有几个原因: 1.母版内版式过多.解决方法:①点击“视图”选项卡下的“幻灯片母版”:②删除左边没必要的版式. 2.图片质量太大.解决方法:①选中任意一张图片:②点击“图片工具”的“格式” ...

  7. Quartz.NET 2.x教程

    第1课:使用Quartz第2课:工作和触发器第3课:关于工作和JobDetails的更多信息第4课:有关触发器的更多信息第5课:SimpleTriggers第6课:CronTriggers第7课:Tr ...

  8. 题解 P5733 【【深基6.例1】自动修正】

    题目传送门 分析: 1.这道题可以说是一个字符串的练习好题.我们先来了解一下字符串.在这道题中,建议使用\(string\) \(string\)是\(C++\).\(java\).\(VB\)等编程 ...

  9. ubuntu apt 换源

    修改配置文件/etc/apt/sources.list 内容替换为 阿里镜像源 deb http://mirrors.aliyun.com/ubuntu/ vivid main restricted ...

  10. 洛谷P1372 又是毕业季I

    https://www.luogu.org/problem/P1372 #include<bits/stdc++.h> using namespace std; long long n,k ...