css3中position:sticky

更新日期: 2018-12-11阅读: 2.9k标签: 定位

最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部;


实现方法:

使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式;

bug1:获取指定位置错误,因为上面都是图片,在图片未加载出来时获取高度,高度值不对,解决办法就是在imgae上加bindload事件,在图片加载加载完成之后再获取高度;

bug2:onPageScroll事件会有延迟,导致最终效果会出现卡顿,百度之后知道有一个position:sticky,是一个很有意思的属性;


在屏幕范围是该元素的位置不会受到定位的影响,当该元素的位置将要移出偏移的范围时,定位又会变成fixed。根据设置的left top等属性值成固定位置的效果。
sticky属性的特点:

该元素并不脱离文档流,仍然保留元素原来在文档流中的位置;

当元素在容器中被滚动超过指定的偏移值时,元素就会固定到容器的指定位置,也就是说如果元素设置设置top:50px;那么在sticky元素滚动到距离相对定位元素的顶部50px时固定,不再向上移动;

元素固定的相对偏移是相对于离他最近的具有滚动框的祖先元素,如果祖先元素都没有滚动框,那么就是相对于viewport来计算元素的偏移量


tip:需要考虑父元素的高度的情况,sticky元素在到达】父元素的底部时,则不会再发生定位,如果父元素并没有比sticky元素高,那么sticky元素一开始就到达了底部,就不会有定位的效果,当元素滚动到父元素的底部时sticky属性失效

如果父元素的overflow属性不是默认的visible,那么sticky属性不会生效


但是这个属性的兼容性不是很好,可以使用的浏览器只有FireFox和Safari

来源:https://www.cnblogs.com/xiaofenguo/p/10102963.html


链接: https://www.fly63.com/article/detial/1551

苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩。你可以使用position:absolute样式来定义对话框,但是position:relative的元素出现的位置决定了对话框在页面中的绝对位置。

原生JS实现页面内定位

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

css和xpath定位补充

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

html5获取地理位置和定位

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

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

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

CSS定位

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

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

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

CSS相对定位和固定定位

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

前端粘性定位事件

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

css定位方式有哪几种?

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

点击更多...

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