粘性头部效果

引子

最近碰到一个效果:页面滚动时,当指定元素超出可视区时,需要固定在可视区顶部。后来想到另外一种方式,在此统一记录一下。

思路一

这种思路比较常见,很早就有在使用,具体是监听滚动事件,在处理事件程序中计算指定元素到可视区顶部的位置,超出可视区时更改元素 position 属性脱离原来的文档流。

这里需要注意的点有:

  • 元素脱离了文档流后,原本所占据的位置,需要处理,否则元素后面的内容会出现突然上移的现象。
  • 滚动事件频繁触发的处理,离开页面时记得要解除事件绑定。

这是示例页面,移动端访问如下:

粘性头部效果_第1张图片

示例主要代码



  
  
    

需动态固定的元素

内容
  body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .title-holder,
  .title {
    top: 0;
    margin: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
  }
  var scrollObj = document.querySelector('body');
  var targetHolderEle = document.querySelector('#titleHolder');
  var targetEle = document.querySelector('#title');
  var scrollMark = null;
  function dealScroll() {
    if (scrollMark) {
      clearTimeout(scrollMark);
    }

    scrollMark = setTimeout(() => {
        var topDistance = 0;
        // getBoundingClientRect 有些浏览器不支持
        if (targetHolderEle.getBoundingClientRect) {
          var pos = targetHolderEle.getBoundingClientRect();
          topDistance = pos.top;
        } else {
          var eleTop = targetHolderEle.offsetTop;
          topDistance = eleTop - scrollObj.scrollTop;
        }
        if (topDistance < 1) {
          targetHolderEle.setAttribute('class','title-holder');
          targetEle.style.position = 'fixed';
        } else {
          targetHolderEle.setAttribute('class','');
          targetEle.style.position = 'static';
        }
    }, 10);
  }

  function listenScroll() {
    scrollObj.addEventListener('scroll', dealScroll);
  }

思路二

使用新的 positionsticky 。想到这个,是因为想起曾写过 position 属性值 sticky 这篇总结。这种方式相对减少了很多代码,兼容性的问题,看实际应用场景的要求。

这是示例页面,移动端访问如下:

粘性头部效果_第2张图片

参考资料

你可能感兴趣的