内容简介:翻译:疯狂的技术宅原文:本文首发微信公众号:jingchengyideng
翻译:疯狂的技术宅
原文: https://medium.com/@elad/css-...
本文首发微信公众号:jingchengyideng
欢迎关注,每天都给你推送新鲜的前端技术文章
浏览器对 CSS粘性定位有着非常好的支持,但很多开发者都没有用过它。
究其原因有两个:
第一,受到浏览器的良好支持需要漫长的等待:浏览器的支持往往需要很长的时间才能完成,到时候它的功能已经被人们遗忘了。
第二个原因是很多开发者并不能完全理解其工作原理背后的逻辑,这就是我的切入点。
我假设你们都知道什么事CSS定位,不过还是先简单回顾一下比较好:
在3年前,有四种 CSS 定位: static
、 relative
、 absolute
和 fixed
。
static
、 relative
、 absolute
和 fixed
之间主要的区别在于它们在DOM流中占用的空间。 static
和 relative
会保留它们在文档流中的自然空间,而 absolute
和 fixed
则不会 —— 它们的空间被移除而且具有浮动行为。
正如我下面将要解释的那样,新的粘性定位与所有类型都有相似之处。
我的第一个粘性定位
可能很多人都玩过粘性定位。我已经接触过一段时间了,直到我意识到自己并不是完全理解它。
在第一个例子中,大家很容易就能看明白 当视口到达定义的位置时,元素会被粘住。
例:
.some-component{ position: sticky; top: 0; }
但问题是,它有时候能用,而有时却不起作用。 当它工作时,元素会粘住,但在滚动到其他部分,它会停止粘贴。 作为一个靠 CSS 混饭吃的人,我完全不能接受自己对这个问题是不理解的,所以我决定把粘性位置彻底搞清楚。
探索粘性定位
在摆弄它的过程中,我很快就注意到了:当一个具有 position:sticky
样式的元素被包装,且它是包装元素中唯一的元素时,这个被定义为 position:sticky
的元素就不会粘住。
<!-- DOESN'T WORK!!! --> <style> .sticky{ position: sticky; top: 0; } </style> <div class="wrapper"> <div class="sticky"> SOME CONTENT </div> </div>
当我在包装元素中添加更多元素时,它就能开始正常工作了。
这是为什么?
这是因为当一个元素被赋予 position: sticky
样式时,粘性项目的容器是它可以粘贴的唯一区域。 粘性元素没有任何要浮动的元素,因为它只能浮动在同级元素上,作为唯一的子元素,它不能浮动。
怎样才能让 CSS 粘性定位起作用
CSS 粘性定位有两个主要部分, 粘性元素(sticky item) 和 粘性容器(sticky container) 。
粘性元素—— 是我们用位置定义的 position: sticky
样式。 当视口位置与位置定义匹配时,该元素将会浮动,例如: top: 0px
。
例:
.some-component{ position: sticky; top: 0px; }
粘性容器—— 是包装 粘性元素 的 HTML 元素。 这是粘性元素可以浮动的最大区域。
当你定义一个具有 position:sticky
样式的元素时,父元素会被自动定义为粘性容器!
记住这一点非常重要! 容器是粘性元素的范围,并且该元素无法离开其所在的粘性容器。
这就是为什么在前面的例子中,粘性元素没有被粘住的原因:这个粘性元素是粘性容器中唯一的子元素。
CSS 粘性定位的示意图:
粘性元素与粘性容器
查看在CodePen上的例子:
https://codepen.io/elad2412/p...
理解 CSS 的粘性行为
正如我前面说过的那样,CSS 粘性定位的行为与所有其他 CSS 定位不一样,但从另一个角度来说,它们也有一些相似之处。我来解释一下:
相对(或静态)—— 粘性定位元素类似于相对和静态位置,因为它保留了 DOM 中的自然间隙(留在流中)。
固定—— 当元素被粘住时,它的行为与 position: fixed
完全相同,浮动在与视口的相同位置,并从流中移除。
绝对—— 在粘贴区域的末尾,元素会停止,并堆叠在另一个元素的顶部,就像一个绝对定位的元素被放在一个 position: relative
容器内的行为。
粘在底部?
在大多数情况下,您可以使用粘性定位将元素粘贴到顶部,如下所示:
.component{ position: sticky; top: 0; }
这正是它被设计的初衷,而在此之前,只能使用JavaScript完成这个功能。
但你也可以使用它把元素粘到底部。 这意味着你可以把页脚定义为粘性,并且在向下滚动时使它看起来总是被粘在底部。 当到达粘性容器的末端时,元素会停在它的自然位置。 最好是在以粘性容器底部为自然位置的元素上使用它。
完整示例:
HTML
<main class="main-container"> <header class="main-header">HEADER</header> <div class="main-content">MAIN CONTENT</div> <footer class="main-footer">FOOTER</footer> </main>
CSS
.main-footer{ position: sticky; bottom: 0; }
去CodePen查看演示效果: https://codepen.io/elad2412/p...
我在开发中常用它来粘贴摘要表,也会用在粘性页脚导航上,这种方法非常适合。
浏览器支持
-webkit
position: -webkit-sticky; /* Safari */ position: sticky;
最后的话
本文到此就结束了,我希望你能喜欢这篇文章,并从我的经验中学习到一些东西。
如果你喜欢这篇文章,我会非常感谢你的掌声和分享 :-)
本文首发微信公众号:jingchengyideng
欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- CSS粘性定位 sticky 详解(纯干货)
- 深入理解position sticky粘性定位的计算规则
- 使用jQuery和CSS创建一个粘性标题栏
- 前端必懂之Sticky Footer(粘性页脚)
- chatbot系列:引导及个性化推荐提升用户粘性
- 优秀的制作粘性侧边栏效果的jQuery插件:Sticky Sidebar
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Spring框架高级编程
约翰逊 / 蒋培 / 机械工业出版社 / 2006-4 / 59.00元
Spring框架是主要的开源应用程序开发框架,它使得Java/J2EE开发更容易、效率更高。本书不仅向读者展示了Spring能做什么?而且揭示了Spring完成这些功能的原理,解释其功能和动机,以帮助读者使用该框架的所有部分来开发成功的应用程序。本书涵盖Spring的所有特性,并且演示了如何将其构成一个连贯的整体,帮助读者理解Spring方法的基本原理、何时使用Sping以及如何效仿最佳实践。所有......一起来看看 《Spring框架高级编程》 这本书的介绍吧!