关闭

前端粘性定位事件

时间: 2019-10-26阅读: 955标签: 定位

浏览器的世界里本没有粘性定位事件。 然而,网页开发中,元素若使用了粘性定位 position:sticky ,常常还需要一个粘性定位事件,比如,外卖菜单。


粘性定位

元素的位置属性(position)设置为 sticky 时,即称为粘性定位。一个元素 <div> 应用了如下 css 声明,那么该元素称为粘性定位元素(stickily positioned element)。

.sticky {
  position: sticky;
  top: 10px;
}

必须指定 top、right、bottom、left 四个阈值的其中之一,粘性定位才会生效。此外,粘性定位元素的表现与其父元素有关。

当父元素是 body 时,其表现为固定定位,并不完全等同。

<!-- 元素 div.sticky 的表现接近固定定位 -->

<style>
  .sticky {
    position: sticky;
    top: 10px;
    background-color: green;
    height: 40px;
  }
</style>
<body>
  <div class="sticky"></div>
</body>

当父元素不是 body 时,父元素的高度(或宽度)必须大于粘性定位元素的高度,才能在页面滚动时,看出粘住效果。

<!-- 元素 div.parent 高度必须大于 div.sticky 的高度 -->

<style>
  .parent {
    height: 400px; 
  }
  .sticky {
    position: sticky;
    top: 10px;
    background-color: green;
    height: 40px;
  }
</style>
<body>
  <div class="parent">
    <div class="sticky"></div>
  </div>
</body>

粘性定位事件

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前表现为相对定位,之后表现为固定定位,当其父元素也跨越特定阈值时,再次表现为相对定位。这种特殊的表现,说明其内部存在一个状态转换。如果这种状态转换发生时,触发一个自定义的事件,可称该事件为粘性定位事件(sticky-change event)


粘性定位事件的实现

浏览器没有提供检测 sticky 状态转换的 API,也即没有粘性定位事件,所以只能采用间接的方法模拟。

浏览器里的实现

一个可行的实现思路是,监听到 scoll 事件时,取目标元素的矩形信息(boundingClientRect),和设定的阈值比较,当目标元素跨越阈值时,触发自定义事件。

此外,还可使用一个较新的 IntersectionObserver API,异步观察目标元素和祖先元素或顶级文档(viewport)的交叉状态。由于跨越阈值,可以等同于目标元素和祖先元素产生一个交叉。所以,可以借助 IntersectionObserver 实现粘性定位事件。

其思路是,在位置属性设置为 sticky 的元素前后各插入一个节点,并对应创建 2 个交叉观察器,观察这 2 个节点和顶级文档的交叉状态。


小程序里的实现

浏览器平台, IntersectionObserver 创建的交叉观察器,只能观察目标元素和祖先元素的交叉状态。顶级文档(viewport)其实是根级祖先元素。这是一个限制。

小程序平台,createIntersectionObserer 创建的交叉观察,解除了这个限制,即可以观察和顶级文档的交叉(relativeToViewport),也可以观察和任一元素的交叉(relativeTo)。

如下代码,可以观察一个粘性定位元素是否进入特定的参照区域。这是支付宝小程序的实现,需要真机预览。

my.createIntersectionObserver({
    selectAll: true
  })
  .relativeTo('.relative')
  .observe('.sticky', (res) => {
    if (res.intersectionRatio > 0) {
      fireSticky('STUCK', res.id)
    } else {
      fireSticky('UNSTUCK', res.id)
    }
  })

原文:https://zhuanlan.zhihu.com/p/93518890

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6646

关闭

html5获取地理位置和定位

H5地理位置定位功能:首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意;showPosition()获取用户经度纬度;执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧

CSS定位

改变元素在页面中的位置:页面中元素的默认定位方式,默认文档流,从上往下,从左往右;当元素设置浮动后,该元素脱离默认文档流,后面的元素会上前补位。当前元素会在当前行,向左或者向右排列

Ref实现导航滚动定位

在开发项目中时常有点击跳转滚动到锚点的需求,最简单的锚点定位就是给一个a标签,a标签的href = ‘#锚点’,然后给需要跳转的锚点一个id = ‘锚点’。参考最简单的锚点跳转实现方式,在React中使用useRef来实现跳转锚点的功能。

css和xpath定位补充

XPath是一种在XML文档中定位元素的语言。因为HTML可以看作XML的一种实现, 所以Selenium用户可以使用这种强大的语言在Web应用中定位元素。

css定位方式有哪几种?

复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点。下面我们来看一下css的几种定位方式。

css定位 position

定位是一种更加高级的布局手段,通过定位可以将元素摆放到页面的任意位置,使用 position 属性来设置定位

css绝对定位和相对定位、固定定位

绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不会占据空间。相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置。

CSS相对定位和固定定位

一般地,说起定位元素是指position不为static的元素,包括relative、absolute和fixed。前面已经详细介绍过absolute绝对定位的基础和应用,这篇博客介绍和梳理相对定位relative和固定定位fixed的相关知识

浏览器获取手机经纬度位置

网址必须为域名,不能用ip直接访问,否则手机浏览器直接拒绝改请求。iphone的浏览器(包括微信扫码进入网站) ,亲测调用 http 的网站是不能获取到经纬度的,是苹果手机安全的考虑,如果使用https网站的话

原生JS实现页面内定位

需求:点击跳转到页面指定位置.利用a标签的锚点跳转。1、利用a标签的锚点跳转,2、用js的scrollIntoView方法,3、获取id为test的元素距离父元素顶部的位置,即offsetTop, 改变父元素的scrollTop

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!