css应用粘性sticky部署实例
发布时间：2022-04-18 14:26:36 所属栏目：语言 来源：互联网
导读：我们在网上做题目的时候，如果题目一起随选项滑动，那么就需要来回翻看题目，这样的体验效果是很差的。因此，这篇文章就给大家介绍用CSS sticky布局来实现题目定位顶部的效果，本文有思路以及代码，感兴趣的朋友一起来了解一下吧。 运用场景： 新需求有个项
|
我们在网上做题目的时候，如果题目一起随选项滑动，那么就需要来回翻看题目，这样的体验效果是很差的。因此，这篇文章就给大家介绍用CSS sticky布局来实现题目定位顶部的效果，本文有思路以及代码，感兴趣的朋友一起来了解一下吧。 运用场景： 新需求有个项目是要做问卷调查，其中必然会涉及到很多题目，以及一个题目下需要对多个人打分，手机端滑动的时候，就会发生这种现象，划上去会忘记了题目。 所以计算一定的距离之后需要对题头进行一个定位。使滑到相对于区域的题头一直固定在顶部，方便打分。 解决思路： 1.首先想到的是fixed布局就是题头到一定距离的时候就固定在屏幕的顶部。 （可以实现，但是过程不是很丝滑） 2.sticky布局，sticky就可以很好的实现这个需求，但是需要考虑到兼容性（兼容IE） sticky实现思路： 1.首先需要记录滑块的位置，需要监听滚动事件： window.addEventListener("scroll", this.handleScroll); 记得组件销毁前去移出这个事件 beforeDestroyed() { window.removeEventListener("scroll", this.handleScroll); } 2.计算出每道题目的题头距离屏幕顶部的高度，并组成一个数组。 // 记得给每一条题目都设置ref，我的ref就是每道题的id -- vue简略缩写--- <div :ref="question.id" v-for="(question, index) of formData.questions" :key="index" 3.滑动监听到的距离和获取到的题头进行一个比较，选择定位的题头。 // 兼容不同的游览器 不同游览器的offsetTop的取法是不一样的 handleScroll() { this.scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; let scrollTop = this.scrollTop; // 第一题的scrollTop不变，从第二题的scrollTop开始变 this.topPositionArr.forEach((item, idx) => { if (idx > 1) { this.scrollTop = scrollTop + 220; } //为什么这样做呢？ 是因为iE不支持sticky布局，我们需要一个插件去协助使用 if (this.scrollTop > item) { let elements = document.getElementById(`sticky${idx}`); stickyfill.add(elements); （编辑：济南站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
