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

以下代码在vue工程,作参考

  1. handleScroll () {
  2. const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop //向上滚动的高度
  3. const offsetTop = document.querySelector('.swiper_con').offsetTop //观察容器距离顶部的高度
  4. if (scrollTop > offsetTop) { //逻辑判断
  5. this.isFixed = true
  6. } else {
  7. this.isFixed = false
  8. }
  9. }

记得在mounted 中加入监听事件  

  1. 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. FLUSH+RELOAD技术

    FLUSH+RELOAD技术是PRIME+PROBE技术的变体,攻击间谍进程和目标进程的共享页.在共享页中,间谍进程可以确保一个特定的内存的映射从整个cache的层级中剔除.间谍进程就是使用这一点去监 ...

  2. 0级搭建类014-Red Hat Enterprise Linux 7.6 安装

    RHEL 7.6 操作系统安装 这个很简单的嘛?有什么好讲的?

  3. [SNOI2017]炸弹[线段树优化建图]

    [SNOI2017]炸弹 线段树优化建图,然后跑一边tarjan把点全部缩起来,炸一次肯定是有连锁反应的所以整个连通块都一样-于是就可以发现有些是只有单向边的不能忘记更新,没了. #include & ...

  4. Prettier - Code formatter使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Prettier - Code formatter这是一款 格式化js.css代码插件,暂不解释. Prettier是什么? Prettier ...

  5. python中的strip()方法

    python中字符串str的strip()方法 str.strip()就是把字符串(str)的头和尾的空格,以及位于头尾的\n \t之类给删掉. 例1: str=" python " ...

  6. Selenium3+python自动化013-自动化数据驱动及模型介绍

    一.查看当前运行的浏览等相关信息 driver=webdriver.Chrome() print(driver.capabilities["version"]) #浏览器版本 pr ...

  7. tcp与http协议 以及python的实现

    htpp协议 Rquest Headers格式: 请求方法空格URL空格协议版本回车符换行符 头部字段名:值回车符换行符 ··· 头部字段名:值回车符换行符 回车符换行符 请求数据 socket网络聊 ...

  8. ssm开发垃圾分类查询系统 源码 mysql

    需求 基于SSM实现一个垃圾分类查询管理系统, 用户可以根据自定义查询分类信息, 管理员可以对分类信息, 垃圾详情信息进行增删改查的管理 运行环境 jdk1.8,tomcat8.5,mysql5.6, ...

  9. 苹果cms10 官方QQ微信防红防封代码

     代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  10. java继承与多态课后作业

    1.动手实验 源码 class Grandparent {     public Grandparent()  {          System.out.println("GrandPar ...