面试官：JS实现sticky定位？

说到css的定位，也是开发中很常用的一个属性。而在为数不多的css问题中，它也成为了面试中比较常见的问题。 而有了这一篇文章，妈妈再也不用担心会被面试官问到定位的问题了。

面试开始

面试官：可以说一说css中的定位吗，都有哪些属性？

我：一共有五个，分别是static，relative，absolute，fixed，和sticky

面试官：那你可以说一说relative和absolute的区别吗？

我：首先relative定位是相对于本身的位置进行定位，而absolute是相对于最近的已定位（position的值不为static）的祖辈元素进行定位。如果没有已定位的祖辈元素，那就相对于body进行定位。

其次absolute会使元素脱离文档流，影响页面布局。

面试官：既然absolute会脱离文档流，那如果定位的元素发生了重叠需要怎么做？

我：通过z-index属性，将想在上方显示的元素的z-index的值设置的大一些。

面试官：再说一说fixed和sticky吧

我：fixed定位也会使元素完全脱离文档流，而且fixed会相对于浏览器的窗口进行定位。一般涉及到页面滚动不影响元素的位置，我们可以使用fixed进行定位。

而sticky是粘性定位，在正常情况下它保持着原先的布局位置（和relative的表现形式一样），当到达边缘条件之后（定位的top，left等值），元素的表现情况和fixed一样，从而粘在某个位置。

手撕代码

面试官：如果让你自己实现出一个sticky定位会怎么做？

我：可以通过js来实现，因为sticky定位本身是relative和fixed定位的结合，我们只需要在某种条件下表现为fixed定位，某种条件下表现为relative定位就可以了。

而触发事件的方式应该为浏览器窗口的滚动，而获取dom相对于窗口的位置我们可以使用Element.getBoundingClientRect()  方法返回元素的大小及其相对于视口的位置。

    function sticky(dom,height){
      window.onscroll = function(){
        const rect = dom.getBoundingClientRect();
        if(rect.top <= height){
          dom.style.position = 'fixed'
          dom.style.top = height + 'px';
        }else{
          dom.style.position = 'relative'
          dom.style.top = height + 'px'
        }
      }
    } 

这里面我们只用top属性举例。