项目场景：

提示：前几天运营想要实现一个效果，当滚动轮滑过某个视口时，当该视口不可时，悬浮框显示，当该视口上滑可见时，悬浮框可见。可以看到上方底色的背景显示时，右下角黑色悬浮框隐藏，上方背景隐藏时，下方悬浮框隐藏。因为不想用jquery以及通过offfsetHeight计算等实现，采用了intersectionObserver实现，

解决方案：

提示：开始时总想着监听下方背景板，但后来发现无法实现，改为监听上方背景板实现。`

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>测试intersection</title><style>.one {height: 200vh;background-color: aqua;}.two {height: 100vh;background-color: aquamarine;}.aside {position: fixed;bottom: 100px;right: 0px;display: none;width: 100px;background-color: black;}</style>
</head><body><div class="one"></div><div class="two"></div><div class="aside">aoaoaooa</div><script type="text/javascript">let imgs = document.getElementsByClassName('one')[0];let aside = document.getElementsByClassName('aside')[0]const config = {rootMargin: '0px',threshold: 0}let observer = new IntersectionObserver((entries, self) => {entries.forEach((entry) => {if (entry.isIntersecting) {console.log(entry.rootBounds);aside.style.display = 'none'} else {aside.style.display = 'block'}})}, config)observer.observe(imgs)</script>
</body></html>

javascript实现某元素显示隐藏带动其他元素隐藏显示相关推荐

css隐藏状态,CSS元素隐藏和显示
动态的隐藏和显示: // 隐藏元素 document.getElementById("div").style.visibility = "hidden"; // ...
Atitit.判断元素是否显示隐藏在父元素 overflow
Atitit.判断元素是否显示隐藏在父元素 overflow 1.1. scrollTop 指的是元素的滚动条顶端距离原生基线的高度...1 1.2. 判断元素是否显示隐藏在父元素 $(next) ...
文本溢出隐藏显示... 鼠标移动到元素显示全部内容
这是我入司遇到的第一个小需求,听上去就简单,但是奈何前端小白,只能百度,索性有现成的代码,复制就能用,但理解了才能变成自己的. //表格超出宽度鼠标悬停显示td内容 function paramsMa ...
jquery如何设置占位隐藏_jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
隐藏的iscroll元素显示后不能滚动问题
若需要使用iscroll的区域为隐藏,则需要在显示后再初始化iscroll,否则不能滚动.
SAP UI5 SimpleForm 里在水平方向显示多组 Form 元素的实现方法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年9月22日为止,目前已经更新了 133 篇,专栏完成度为 44.3%. 作者简介 Jerry W ...
JavaScript笔记8-DOM中的事件、获取元素、操作元素
目录 1.API和Web API 2.DOM简介 3.获取元素 3.1 根据 ID 获取 3.2 根据标签名获取 3.3 根据类名返回元素对象集合 3.4 根据选择器返回元素 3.5 获取特殊元素(b ...
实现在页面上隐藏某个元素的css,有趣的css—隐藏元素的7种思路
display.visibility.opacity三个属性隐藏元素之间的异同点一直是前端面试面试的常考题. 除了display.visibility.opacity三个属性可以隐藏元素之外,是否还存 ...
css元素隐藏不可获取,Css隐藏元素(display,visibility)的区别
Css隐藏元素(display,visibility)的区别 display display属性值 display 属性规定元素应该生成的框的类型. 属性值: block: /表现为一个块级元素(一般 ...

javascript实现某元素显示隐藏带动其他元素隐藏显示

项目场景：

解决方案：

javascript实现某元素显示隐藏带动其他元素隐藏显示相关推荐

最新文章

热门文章