一、sticky定位简介
你们懂的，在前端开发里，CSS里那个position属性可重要！就是告诉我们怎么摆放东西。平时用的static、relative、absolute 和 fixed这些大家都熟悉得很，今天我要聊聊一个新知识点~ sticky定位，这可是CSS3新出的好东西！简单来说就是让网页拉到最下面时，有些元素依然固定住位置，跟粘在上面似的，这样整个页面看起来更清爽顺眼，更好玩。
二、sticky定位的基本样式及效果
想让那个元素粘住不滑？简单，给它设定成sticky属性，然后加个top、right、bottom或left就好了。比如说增设top:0，这个玩意儿再怎么跑都不会跑到网页顶上去了，除非到了规定地方才会挪窝。所以看网站的时候总有些东西能一直看到，让人感觉舒坦些。
记住，用sticky定位时，元素还是像平时那样占空间。但在某些时候，它就会变成固定定位！这样既保留了相对定位又有了固定定位的优点，给了设计师更多施展空间，发挥元素位置及交互设计的想象力
三、sticky定位兼容性与注意事项
听说现在Chrome、Firefox、Safari还有Edge这些顶尖浏览器都能支持sticky定位！不过，旧版浏览器可能会遇到些问题或者不兼容。使用sticky定位时，别忘了试试看，搞清楚哪儿有问题，然后稍微调整一下，这样网页就可以在各种浏览器里看着美观！
记住要用粘性定位的话，记得父元素得给粘性元素留点儿地方。否则小了挤不下去，滚动的时候很不舒服或者还可能出问题。做网页的时候一定得搞清楚每个部分占多大位置，别让这种事发生。
四、sticky定位的应用实例
.sticky-element {
position: sticky;
top: 0;
}
让我给你解释清楚点，比如说，咱们有个超大篇幅的网页，页面上还固定了个导航栏。不管你怎么查看网站，它都稳如泰山，哪儿也不去。
方法很简单，把导航栏设成「保持不动」，再加上一个”0″的TOP值，问题就搞定！滚动页面时，菜单也不会乱飘，点击起来更容易。
五、如何优化使用sticky定位
别只用传统的 sticky 定位！其实有很多妙招~例如，在做手机网站时要注意采用媒体查询和 JS 来调节导航栏的大小；或者给页面加上过渡特效，增添趣味。
不用担心复杂布局，运用好flex布局和grid布局，再加上PS技术，网页就能独具特色。只要掌握了css布局技术，精确调整元素位置，美轮美奂的网页也能信手拈来！
六、如何调试和排查sticky布局问题
开发中遇到粘性布局问题怎么办？元素乱飞？不怕，浏览器自带的开发者工具可以帮到你。
先瞅瞅标签上的sticky属性和边上的top啊right啊bottom啊left啥的对不对位；接着看一眼布局里是不是哪儿有东西给挡住了，或者有地方被盖住了。然后试试把其他所有样式或JS都去掉，直接抓住问题的重点找原因！
七、结合其他CSS属性与技巧
别只会用那个粘性布局，css还藏着好多好玩的功能！比方说，用z-index 来调整图层顺序、用 transform 来搞点变形或放大缩小啥的、给网页加点 box-shadow，让它更有层次感。学会这几个技巧，你的网页肯定能焕然一新，更吸引眼球！
.container {
width: 200px;
height: 300px;
overflow-y: scroll;
}
.sticky-element {
position: sticky;
top: 0;
background-color: yellow;
padding: 10px;
}
This is a sticky element
掌握几个 CSS 属性和超炫技巧，就能让网页美得惊人！而且还能优化用户体验，保证吸引眼球～
八、总结
来看看！这里教给你浏览器里那个叫sticky布局的东西是什么，还有教你怎么利用它搞出超厉害的效果。比如，想要让导航栏固定在网页顶部？没问题！碰到网页布局的问题？大部分都可以解决～
用的时候别大意，留意小事情，比如兼容性，父子关系啥的。还有要关注最新前端动态，跟上时代。希望这篇小文章能帮到你！
评论0