css sticky定位,介绍css3中position:sticky
运用场景：
新要求有一个项目做问卷调查，必然会涉及到很多题目，需要在一个题目下给多人打分。手机滑动会出现这种现象，标了题就忘了。所以计算好一定距离后，就需要定位标题了。相对于顶部要固定的区域滑动标题，方便评分。
:
解决思路：
1.首先想到的是，固定布局是指当达到一定距离时，页眉固定在屏幕顶部。(可以实现，但是过程不是很顺利)
2 .粘性布局
Sticky可以很好的满足这个要求，但是要考虑兼容性(即兼容性)。
:
sticky实现思路：
1.首先，您需要记录滑块的位置并监听滚动事件：
window . addevent listener( scroll ，this . handle scroll)；请记住在销毁组件之前，在destroyed(){ window . removeeventlistener( scroll ，this.handle scroll)之前移除此事件；}2.计算每个问题的标题距离屏幕顶部的高度，并形成一个数组。
//记得每道题设置一个ref。我的ref是formdata.questions的每个问题ID的ID ID-vue缩写-div:ref= question . ID v-for=(question，index ):key= index //为了防止混乱，我还做了一个sort- for (let key in this。$refs) { for(让idx在这。$ refs[key]){ this . toppositionarr . push(this。$refs[key][idx]。offsetTop)；} } this.topPositionArr=[.新设置(this . toppositionarr)]；this . toppositionarrtoppositionarr=this . toppositionarr . sort((a，b)={ return a-b；} );3.通过滑动将监控的距离与获取的标题进行比较，并选择定位的标题。
//兼容不同的浏览器。不同的浏览器有不同的接受方式。handle scroll(){ this . scroll top=document . document element . scroll top？document . document element . scroll top:document . body . scroll top；let scroll top=this . scroll top；//第一个问题的scrollTop不变，从第二个问题的scrollTop变为this . toppositionarr . foreach((item，idx)={ if(idx 1){ this . scroll top=scroll top 220；}//为什么这么做？因为iE不支持粘性布局，所以我们需要一个插件来帮助使用if(this . scroll top item){ let elements=document . getelementbyid(` sticky $ { idx } `)；stickyfill.add(元素)；}});} 4.IE的兼容性
因为IE不支持粘性布局，我们需要轮子粘性填充。
npm安装粘性填充纱并添加粘性填充
您需要给头部的div标签一个动态id来表示惟一性。
div:id= ` sticky $ { question . index } class= sticky 单个文件简介
在需要的页面中引入：scriptsrc= path/to/sticky fill . min . js /script var sticky fill=require( sticky fill )；var sticky fill=sticky fill()；Js文件：
详见上述3le elements=document . getelementbyid(` sticky $ { idx } `)；stickyfill.add(元素)；以上可以完美实现~ ~ ~
PS:如果只需要兼容谷歌，就不需要这么麻烦了。你可以直接使用stiky布局，你不再需要轮子-
可以参考https://www . Zhang xinxu . com/WordPress/2018/12/CSS-position-sticky/许昕的文章。
最后效果图：
就是这样。本文介绍了如何将标题放置在css粘性布局的顶部。更多相关css粘性内容，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。