Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >IE兼容position: sticky

IE兼容position: sticky

作者头像
4O4
发布于 2022-04-25 12:01:39
发布于 2022-04-25 12:01:39
2.5K00
代码可运行
举报
文章被收录于专栏:404404
运行总次数:0
代码可运行

IE兼容position: sticky

库:https://github.com/wilddeer/stickyfill

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// install
npm install stickyfilljs --save
or
yarn add stickyfilljs
or
<script src="path/to/stickyfill.min.js"></script>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// html
<div class="sticky">
	...
</div>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// css
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

// clearfix
.sticky:before,
.sticky:after {
    content: '';
    display: table;
}
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import Stickyfill from "yarn add stickyfilljs";

// js usage
var elements = document.querySelectorAll('.sticky');
Stickyfill.add(elements);

// jq usage
var elements = $('.sticky');
Stickyfill.add(elements);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-09-08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
📚一站式解决:H5开发全攻略,看这篇让你省时又省力
在 H5 中,我们通常会使用 REM 和 VW 这两种单位来实现页面的响应式布局。这两种单位可以让页面元素的大小随着根元素(对于 REM)或视口宽度(对于 VW)的大小变化而变化,从而适应不同尺寸的屏幕。
linwu
2023/07/27
1.3K0
Tips-移动端滑动固顶效果(position: sticky)
先放个图看看滑动固顶是啥效果: image.png 中间那个 tab 条,平常的时候是固定的,等到页面滑上去的时候,又像 fixed 一样贴在顶部。 position: sticky 就是用来实现这个效果的,元素不脱离文档流,仍然保留高度,所以这个属性真是人畜无害啊,而且效果如丝般润滑,堪比原生。 事实上,很多看起来人畜无害的东西,其背后都有一个大坑。 我们的 html 结构是这样的: <body ontouchstart=""> <div class="page-wrapper">
Bob.Chen
2018/05/02
2.2K0
Tips-移动端滑动固顶效果(position: sticky)
使用 position:sticky 实现粘性布局
如果问,CSS 中 position 属性的取值有几个? 大部分人的回答是,大概是下面这几个吧? { position: static; position: relative; position: absolute; position: fixed; } 额,其实,我们还可以有这 3 个取值: { /* 全局值 */ position: inherit; position: initial; position: unset; } 没了吗?偶然发
Sb_Coco
2018/05/28
1.8K0
帅帅的导航代码
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href
小小鱼儿小小林
2020/06/23
1.3K0
Hexo-Butterfly主题魔改
本文章首发于语雀! 通过各种高科技功能同步到Hajeekn 的博客 由于每个人的博客目录都不相同,这里博客目录使用%brt%代替 本文章除 Pace wowjs 普通引入法以外,其他魔改都不适合 Butterfly3.6.0 及以上
FloatSheep
2022/04/25
2.6K0
Hexo-Butterfly主题魔改
position:sticky的尝试
sticky这种设计效果是经常出现的,比如陶宝右侧的工具栏,当我们向下滚动到它的位置时,它就会黏住顶部跟随滚动,类似position: fixed的效果,只不过它的触发条件是当我们滚动到所在位置时,才触发fixed的效果的:
javascript.shop
2019/12/10
1K0
前端特效学习1
今天找素材的时候,发现明天(1月5日)是宫崎骏爷爷80岁生日,祝宫崎骏爷爷福如东海,寿比南山。
用户7162790
2022/03/23
6470
前端特效学习1
将Markdown字符串转成HTML
使用以下插件,依次实现:markdown字符串转HTML、自动生成目录(toc)、代码高亮等功能。
Learn-anything.cn
2021/11/27
3.3K0
CSS3之position:sticky使用
css3中position有个属性值sticky,即粘型定位,初级面试中会经常问到,大多数面试者往往会忽略这个属性值,其可以理解为相对定位(relative)和固定定位(fixed)的结合。
不叫猫先生
2023/11/28
5880
Handsome主题美化
Github: https://github.com/mokeyjay/Pixiv-daily-top50-widget 主题设置 - 开发者设置 - 全局右侧广告位添加以下代码
Gujiu
2022/12/02
9690
网页大作业代码自取
👨‍🎓静态网站的编写主要是用HTML DIV+CSS JS等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等,用的最多的还是DW,当然不同软件写出的前端Html5代码都是一致的,本网页适合修改成为各种类型的产品展示网页,比如美食、旅游、摄影、电影、音乐等等多种主题,希望对大家有所帮助。 <hr> 🧡 【作者主页——🔥获取更多优质源码】 🧡 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1
IT司马青衫
2022/08/23
6790
网页大作业代码自取
如何运用position:sticky实现粘性布局?
如果问,CSS 中 position 属性的取值有几个? 大部分人的回答是,大概是下面这几个吧?
Javanx
2019/09/04
2K0
如何运用position:sticky实现粘性布局?
神奇的position:sticky
position:sticky定义, eg:CSS中position属性介绍(新增sticky)
Rattenking
2021/01/29
2.1K0
CSS固定定位与粘性定位4大企业级案例
前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。
艾编程
2022/12/11
1.7K0
CSS固定定位与粘性定位4大企业级案例
position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后,逐渐接触到具体的业务。在这里主要介绍下关于css3草案的position:sticky属性的兼容。 问题 目前前端的h5有个需求,就是“当页面上的若干个标题被拖动到视口的顶部时,则显示一个被定位到视口的顶部的tab标签,可对这个tab标签进行点击导航,并在某个特殊的情况下隐藏”。最简单粗暴的做法就是针对doc
欲休
2018/03/15
3.9K0
Angular+PhotoSwipe实现图片预览组件
先前写过一篇文章:【组件篇】ionic3图像手指缩放滑动预览,是原来封装的一个组件的原型,后来用ionic4后,这个组件不兼容,需要改,那时我开始考虑组件的封装不依赖于ionic自身的组件,所以重写了一个。
IT晴天
2019/05/08
2.4K0
Angular+PhotoSwipe实现图片预览组件
一篇文章带你了解网页框架——Vue简单入门
如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助
秋落雨微凉
2022/10/25
1K0
一篇文章带你了解网页框架——Vue简单入门
CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)
页面模板 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="description" content="本网站的目的是....." /> 7 <meta name="keywords" content="作品集,素材库"
xing.org1^
2018/05/17
1.7K0
NeoDB API 创建观影页面
几个月之前在 长毛象联邦宇宙 里问过 NeoDB 官方有没有 API,得到肯定回答后,我就着手计划把观影页面的 API 搬到 NeoDB 了。前几天豆瓣的图片挂掉之后,加快了这一进程。 感谢豆瓣以前提供的无偿服务。不过这也印证了 SaaS 服务不可信 的观点。
eallion
2023/10/18
6650
NeoDB API 创建观影页面
【Html.js——标签导航栏】卡片化标签页(蓝桥杯真题-1765)【合集】
选中 index.html 右键启动 Web Server 服务(Open with Live Server),让项目运行起来。接着,打开环境右侧的【Web 服务】,就可以在浏览器中看到如下效果,当前显示仅有静态布局,并未实现选项卡切换功能。
Rossy Yan
2025/01/24
2770
【Html.js——标签导航栏】卡片化标签页(蓝桥杯真题-1765)【合集】
相关推荐
📚一站式解决:H5开发全攻略,看这篇让你省时又省力
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验