vue tabs滚动至页面某位置后悬停

在开发中我们经常遇到页面中间有一个tab切换,随着列表一起滚动,当tab滚动至header或页面顶部时悬浮,列表继续滚动的场景。
此场景有几种解决方案,下面是其中的两种解决方法。

1.使用position和top解决。
position sticky 对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。使用时需要设置距离顶部的距离。
即设置想悬浮元素为{position: sticky; top: 0px;}
但是因为部分浏览器不兼容,所以在部分android机器上会不兼容。

2.根据比较滚动距离和该元素距离顶部的距离大小来设置元素的样式。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 一、场景 需求:tab需要在划出视口的时候吸顶(sticky),方便点击切换下方内容。 二、方案 1、采用scro...
    玲儿珑阅读 8,178评论 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,086评论 1 45
  • 拉开窗帘,一缕阳光从窗沿的栏杆的外流泻进来。 一缕!真的是一缕!我站在阴处静静端详这奔波了很远才...
    April2005阅读 747评论 0 0
  • 1.缘起 一篇关于“专业硕士研究生教育”的论文,库哥(硕士研究生同门)写的,我居然看不懂。首先是核心概念不懂,什么...
    平锅是哪一锅阅读 1,599评论 0 0