首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS粘性定位 - 它真正工作原理!

原因有两方面:一是等待浏览器支持时间太长,导致这个特性遗忘;二是大部分开发者并不完全理解它工作原理。...当它正常工作时,元素会""在一定位置,但在滚动其他部分,它又会停止""住。作为一个每天都在使用CSS的人,作者无法接受自己不能深入理解这个问题根本原因,所以决定深入研究sticky定位。...Stick 探索 在尝试使用 sticky 定位过程中,我很快发现,当一个具有sticky定位样式元素包裹起来,并且它是包裹元素内唯一元素时,这个定义为sticky定位元素并不会""住。...Absolute 定位 - 在粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素在 position: relative 容器内行为一样。 贴在底部?...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且在向下滚动时始终会出现粘在底部。当我们到达粘性容器末尾时,元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部元素。

24820

天天做饼图,你烦不烦?老板都看腻了!

好象也没毛病,也挺好看。但是....所有人图表都是这样做,怎能突出你图表个性?还可以更好看?看看下面的水滴图表: ? 你老板和同事看到会不会眼前一亮?...可这是真的 在Excel中有一个奇异现象,很多图表高手用来做高阶图表:图片可以直接到图表中! 选取苹果图片复制,再单击两下选中苹果柱子,按Ctrl+V即可把柱子换成苹果图片。 ?...2、按shift不松插入圆形,复制并按Ctrl+V粘贴到低柱子上,然后圆形改变成白色填充只留边线,再复制粘贴到高柱子上。 ?...4、在图表工具 - 设计 - 切换行/列。再选中圆形,系列重叠设置为100%,最后选合并图形把编辑栏中公式=SERIES(Sheet1!$B$1,,Sheet1!...Excel图表可以直接到PPT中,还可以粘贴成带链接格式,Excel中数据更新,PPT中图表也会更新。 想要工作出色,就要有自已特色,做数据分析报告、做图表也是这样。

90220
您找到你想要的搜索结果了吗?
是的
没有找到

JS浏览器环境下各种实用API记录

所有操作都是异步,返回 Promise 对象,不会造成页面顿。而且,它可以将任意内容(比如图片)放入剪贴板。...另外,需要注意是,脚本读取总是当前页面的剪贴板。这带来一个问题是,如果把相关代码粘贴到开发者工具中直接运行,可能会报错,因为这时的当前页面是开发者工具窗口,而不是网页页面。...document.body.addEventListener( 'click', async (e) => { await navigator.clipboard.writeText('Yo') } ) 4....Pjax相关 1. document.title,修改浏览器显示网页标题。 2. history对象新增方法,修改浏览器顶部显示URL,增加一条历史记录。...pushState(data, title [, url]):往历史堆栈顶部添加一条记录。

76720

WordPress 6.2 发布,全面提升站点编辑体验

WordPress 6.2 版本今天发布了,新版全面提升了站点编辑器体验,引入了更多网站设计功能,并提供了新无干扰写作模式。...更流畅区块插入器 区块插入器也有了全新设计,让用户可以更容易访问到自己所需内容,新增「媒体」选项可以直接拖放现有媒体库中内容,另外它拆分视图可以同时浏览区块类别和查看预览,从而更快查找到所需区块模板...区块控件如影随形 区块在侧边栏控件拆分成「设置」和「样式」两个选项,更加容易定位和使用。...样式复制粘贴功能 该功能让用户可以在同类型一个区块上完善设计,然后将这些样式复制并粘贴到其他区块上以获得想要外观。...6.2 中其他亮点 悬停顶部:可以设置顶部一组区块在页面滚动时都固定在顶部。 导入窗体:可以将喜欢经典主题窗体导入到区块主题中。 本地字体:默认 WordPress 主题将谷歌字体本地化了。

1.1K40

Vim基础用法,最常用、最实用命令介绍(保姆级教程)

配置文件设置set number (设置行号)set nocompatible (设置不兼容vi模式,不设置会导致许多vim特性被禁用)set clipboard=unnamed (设置普通复制内容和...)y$ (复制当前字符到行尾)y^ (复制当前字符到行首 )yG (从当前位置复制到文件结尾)yf+(任意字符), (从当前字符复制到任意字符)yy (复制当前一整行)p (粘贴)p (粘贴到游标所在行下方...)shift + p 或者叫大写P (粘贴到游标所在行上方)d (剪切/删除)vd/x (删除当前游标所在字符)dw (删除游标右边单词)db (删除游标左边单词)d$ (删除从当前游标到行尾...)viw + d / y (选中之后可以删除、复制)跳转w (向右跳转一个单词)b (向左跳转一个单词)^ (跳到行首非空字符)0 (跳到行首第一个字符)$ (跳到行尾)gg (跳到文件最顶部)shift...+ g 或者叫 G (跳到文件最底部),引申命令:ggvG (全选)-解释:选中最顶部到最底部,即全选nG (n表示行号,例:16G,表示跳到16行)50% (跳到文件中间位置)n% (跳到文件对应比例位置

1.3K00

小程序或将改变人们购买习惯,门店+社交小程序新风口

你也可以在门店详情中,获取门店二维码,在微信内传播,或张贴到线下。同时,小程序也支持应用到券、WI-FI和广告等业务。 二、为什么线下实体商家需要门店+社交小程序?...(一)、小程序将成门店新机遇 微信持续发力小程序,小程序4大先发优势,成为线下门店新机会。...1.附近小程序:精准LBS定位技术,让附近客户,能够轻松找到你线下门店; 2.微信关键词优先:微信同一关键词搜索,小程序排第一; 3.关联公众号:公众号关联门店小程序,吸粉之后,引导更多客户消费...; 4.打通微信包:门店+社交小程序会员打通微信包,客户还能从微信包中进入小程序。...2、秒变会员 顾客只要下单支付便能一键成为会员,门店+社交小程序能够实现多码合一,即“支付码=会员码”,消费者在购物全程只需停留在一个页面,大幅提升收银购物效率、优化购物体验。

2.2K310

教你轻松做出像「饿了么」一样点餐界面

今天,知晓程序就来为大家讲解,如何在小程序中使用 sticky 方法,将页面元素固定在屏幕上。 关注「知晓程序」微信公众号,回复「开发」,获取小程序优化秘籍。 什么是 sticky 效果?...简单地说,sticky 就是标题栏」效果,向下滑动时跟着列表走、向上滑动到顶部时将会固定在顶部。 ?...顶部蓝色条幅,就是 sticky 后效果 如果不考虑不同浏览器兼容性,CSS 3 就有一个 position: sticky 属性,就能实现这种效果。 ?...众所周知,小程序不能使用 DOM 操作页面,也没法使用 jQuery $ 对象,快捷获取 scrollTop,还不能像 vue 一样,直接操作 $el。...原文地址: https://juejin.im/post/5a03106cf265da432f308da4

93140

【适老化专题】云闪付、中国工商银行、中国建设银行适老化实测体验

一、云闪付 关爱版切换方式有4种:① 从【我】-【设置】-【切换至关爱版】开启;② 通过搜索“关爱”、“长辈”、“老人”获得【关爱版】切换入口;③ 从【我】-【精选服务】-【云闪付关爱版】页面进入;...3.交易环境安全性: ①【首页】前置了 “防诈小课堂”,结合相关反诈案例与温馨提示,有利于引导老年用户提高自我安全防范意识。...②【管理】作为核心功能之一,其页面删减了顶部轮播广告、申请信用、信用还款等功能。...体验中亮点设计: 1.【首页】进行了功能重新梳理和交互设计改版:①【银行信息】优化成卡片形式,在顶部呈现,用户可更直观查看银行余额以及卡片数量。...4.交易环境安全性: ①【首页】-【投资理财】页面删减了“外币兑换、证券、结售汇”等功能,直接呈现了稳健定期等投资方案,适合老年用户理财理念。

1.1K20

IntelliJ IDEA 快捷键大全 + 动图演示,这效果太炸了!

Ctrl + V:粘贴 Ctrl + Alt + Shift + V:粘贴为纯文本 Ctrl + Shift + V:从历史选择粘贴 从历史剪版中选择要粘贴内容。...Shift + F4:在新窗口中打开 在新窗口打开当前文件。...Ctrl + [:移动至代码块开始 Ctrl + ]:移动至代码块末尾 Alt + Down:下一个方法 Alt + Up:上一个方法 Ctrl + PageUp:移动至页面顶部 Ctrl + PageDown...向上选择 Shift + Down:向下选择 Ctrl + Shift + [:选择至代码块开头 Ctrl + Shift + ]:选择至代码块结尾 Ctrl + Shift + PageUp:选择至页面顶部...+ Alt + Down:下一事件 Ctrl + Alt + Up:上一事件 Alt + Right:选择下一个选项 Alt + Left:选择下一个选项 F11:切换匿名书签 Ctrl +

74120

如何下载 Vimeo 视频?

以下是 Vimeo 特点:支持高达 4K 超高清高质量流媒体将视频从计算机、移动设备和云空间上传到 Vimeo上传高达 8K 360° 视频无广告 作者可以设置查看、下载和付费权限。...1.播放私人Vimeo视频,在页面边缘右键,找到“Inspect(检查)”;图片2.点击开发代码页面左上角箭头;图片3....将鼠标移动到可以包含整个视频位置,视频代码会自动定位在右侧;图片4.寻找“div id”和“data-config-url”段落,复制链接;图片5.将链接粘贴到新网页中,会得到一大串看不懂字符,...将其全部复制下来;图片6.打开JSON查看器网站,将URL粘贴到这里,点击顶部“格式”;图片7.你会发现所有的代码都开始整理了,按“control + F”或“command + F”快速关键字搜索,...请搜索“progressive”;图片8.此时,你定位在一个指向不同画质视频链接,向下滑动直到看到“1080p”,然后将链接复制到该区域;图片9.重新打开一个网页,粘贴链接,你会发现视频出现了,点击右下角

6.4K20

16款值得一用iPhone线框图模板 (PSD & Sketch)

模板中标注了顶部导航栏、底部导航栏以及键盘高度位置。无论是打印或复制粘贴到原型工具中使用都非常方便。可以说设计师非常贴心了。...这是一款专门为iPhone 7 准备线框图模板,设计师同样标注了顶部导航栏、底部导航栏以及键盘高度位置,可以直接打印出来做手绘原型或线框图设计。...这款iPhone线框模板是原型设计工具Mockplus中自带线框模板,添加了顶部状态栏和底部home按钮。预览时更加形象化。...在Sketch文件中,包含四种模板: 带引导纯线框 带引导和设备轮廓 带导向和设备遮罩 带引导和设备轮廓 同样也可以用B4和A4纸张尺寸打印,用于素描。...这是一款iPhone X线框案例,包含100+页面和20种常见页面的设计,完整展示了一个真实手机应用程序所需要具有的页面。对于初学者来说,这个项目可以说非常友好,省时省力。

1.9K20

xwiki功能-附件

一个页面可以包含附件,然后在页面中引用。一个常用实例,例如上传图像附件,在页面内容中显示。...上传文件 有3种方式上传文件: 使用页面顶部菜单 你可以通过"More actions"菜单上传附件: ? 当点击时,它会引导你到位于页面底部附件选项: ?...使用页面底部附件选项 查看你希望上传文件页面,然后点击页面底部“附件”选项。 ? 请注意,上传时,文件选择器允许你尽可能多选择文件。因此,你不需要逐一添加附件。...,你希望从你wiki链接到它,只需使用URL链接作为你wiki链接内容。...大小限制 附件最大上限是由管理员限定。默认情况下,它设置为大约32MB。 更多 有关XWiki附件是如何工作,以及如何配置/调整附件存储,你可以查阅管理员附件指南。

1.3K20

一种外置线缆收束限位机构室内用高端路由器

该外置线缆收束限位机构室内用高端路由器,设置有缠绕杆和合槽,通过缠绕杆设置,可以使多余长度线缆收起,而且通过合槽使遮挡板将缠绕线缆进行固定,使线缆缠绕后,不会轻易脱出,保证了弱电箱内部整洁...),且高端路由器本体(1)上表面螺栓固定有透气网口(3),并且高端路由器本体(1)下表面接固定有固定框(4),所述高端路由器本体(1)前表面接固定有缠绕杆(5),且高端路由器本体(1)前表面开设有线缆本体插接口...,从而保证了人们网络使用畅通,提高了人们使用体验感; 4.该外置线缆收束限位机构室内用高端路由器设置有缠绕杆和合槽,通过缠绕杆设置,可以使多余长度线缆收起,而且通过合槽使遮挡板将缠绕线缆进行固定...3,并且高端路由器本体1下表面接固定有固定框4,高端路由器本体1前表面接固定有缠绕杆5,且高端路由器本体1前表面开设有线缆本体插接口6。...、2、3、4与零件高端路由器本体1、吸盘脚2、透气网口3、固定框4序号1、2、3、4不是指代一种,缠绕杆5上序号1、2、3、4仅仅表示缠绕方向),接着继续向上推动遮挡板103,因为缠绕杆5与合槽

37520

灵活运用CSS开发技巧

在线演示 Behavior Skill 使用overflow-scrolling支持弹性滚动 要点:iOS页面非body元素滚动操作会非常(Android不会出现此情况),通过overflow-scrolling...: touch; } .elem { overflow: auto; } 使用transform启动GPU硬件加速 要点:有时执行动画可能会导致页面顿,可在特定元素中使用硬件加速来避免这个问题...在线演示 使用box-shadow裁剪图像 要点:通过box-shadow模拟蒙层实现中间镂空 场景:图片裁剪、新手引导、背景镂空、投射定位 兼容:box-shadow 代码:在线演示 ?...在线演示 球 要点:相交效果双球回弹运动 场景:动画 兼容:filter、animation 代码:在线演示 ?...在线演示 商城票券 要点:边缘带孔和中间折痕票劵 场景:电影票、代金券、消费 兼容:gradient 代码:在线演示 ?

4.5K20

ONLYOFFICE 桌面编辑器 8.1 强势来袭:解锁全新PDF编辑、幻灯片优化与本地化体验,立即下载!AI

1.2 添加、旋转和删除页面 管理PDF文件页面也是PDF编辑器重要功能。用户可以通过点击“页面”选项,选择“添加页面”,在现有文档中插入新页面。...类似地,插入表格和形状也是通过“插入”选项相应工具完成,插入后可以直接在页面中调整和编辑这些对象。...在查看模式下,文档内容是只读,用户不能对其进行任何修改。这一模式适用于需要审阅或分享但不希望修改文档。...设置页面颜色: 打开需要编辑文档。 点击顶部菜单栏中页面布局”选项。 选择“页面颜色”按钮,从颜色选项中选择需要颜色,或点击“自定义颜色”,设置特定颜色值。...页面颜色设置后,文档背景颜色会立即更新,用户可以预览效果。 自定义编号格式: 在文档中选中需要编号段落或列表。 点击顶部菜单栏中“开始”选项,选择“编号”按钮。

10410

CSS粘性定位是怎样工作

static 和 relative 会保留它们在文档流中自然空间,而 absolute 和 fixed 则不会 —— 它们空间移除而且具有浮动行为。...探索粘性定位 在摆弄它过程中,我很快就注意到了:当一个具有 position:sticky 样式元素包装,且它是包装元素中唯一元素时,这个定义为 position:sticky 元素就不会粘住...固定 —— 当元素粘住时,它行为与 position: fixed 完全相同,浮动在与视口相同位置,并从流中移除。...绝对 —— 在粘贴区域末尾,元素会停止,并堆叠在另一个元素顶部,就像一个绝对定位元素放在一个 position: relative 容器内行为。 粘在底部?...在大多数情况下,您可以使用粘性定位将元素粘贴到顶部,如下所示: ? 这正是它被设计初衷,而在此之前,只能使用JavaScript完成这个功能。 但你也可以使用它把元素到底部。

1.8K10

一场耗时4小时技术分享:程序员AI取代,人工智能泡沫,云渲染技术,蒙特洛收敛……

本周四下午,养码场协助酷家乐举办“技术开放日”在微雨中开启。不少技术人是冲着张宏江博士来,想听听他对AI理解;也有技术人表示对酷家乐渲染引擎感兴趣,来踩踩点。 ? 签到处 ?...茶歇处 本次“技术开放日”现场邀请了4位技术嘉宾,在技术细分领域都有着自己深入研究: · 微软亚洲研究院副院长及创始人之一张宏江博士 · 酷家乐首席科学家阿替 · 酷家乐技术专家阿敏 · 酷家乐技术专家佚名...张宏江博士 在分享会现场,张宏江老师围绕“AI产业本质和机会”这个主题,分别从“AI潮流”、“大数据”、“AI发展前景”、“AI机会和陷阱”四个维度分享了他对AI深度理解,以现阶段AI应用场景与价值等讯息...分享现场 “蒙特洛收敛是由2017年3月由全球顶尖渲染技术研发团队Disney Research首度发表论文提出,但酷家乐早于2016年底,便已经使用类似于迪士尼团队多层深度网络结构优化渲染引擎。...针对酷家乐核心技术,首席科学家阿替满是骄傲地分享道。 ? 阿替 以下是阿替分享整理。 ?

46220

最新iOS设计规范二|7大应用架构

后台也要尽可能使用预加载,例如在播放动画或用户正在操作导航栏选项时,后台预先加载出来即将播放和显示内容。 用引导或娱乐方式来掩盖加载时间。...父视图或上一张卡片顶部边缘在当前卡片后面可见,这样可以帮助人们记住他们在打开卡片时暂停任务。...人们通过以下方式关闭卡片: 从屏幕顶部向下滑动 内容滚动到顶部时,可以从屏幕任意位置向下滑动 轻按一个按钮 工作表常用在无法实现复杂任务、非沉浸式模式和内容。...iOS默认过渡方式是:模式视图从屏幕底部向上滑入,关闭时向下滑出。注意在整个APP中使用统一模态转换样式。...拆分视图提供与选项栏相同快速导航,同时更好地利用了大屏幕。 当您具有内容类型相同多个页面时,请使用页面控件。页面控件清楚地传达了可用页面的数量以及当前处于活动状态页面

2.6K20
领券