平滑的实现tab固定在页面顶部

<div>
    <div id="aboveTab">
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>

        <img src="https://css-tricks.com/wp-content/uploads/2018/11/dddgrid-gap.svg"  style="width:500px;"/>
    </div>
    <div id="tab">
        <ul>
            <li>
                <p>tab1</p>
            </li>
            <li><p>tab2</p></li>
            <li><p>tab3</p></li>
        </ul>
    </div>

    <div id="belowTab">
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <p>这里是内容</p>
        <img src="https://css-tricks.com/wp-content/uploads/2018/11/dddgrid-gap.svg"  style="width:500px;"/>
        <img src="https://css-tricks.com/wp-content/uploads/2018/11/justify-items-stretch.svg"  style="width:500px;"/>
        <img src="https://css-tricks.com/wp-content/uploads/2018/11/justify-items-stretch.svg"  style="width:500px;"/>
    </div>
</div>

<style>
    *{margin: 0;padding: 0}
    p{
        line-height: 2;
    }
    ul li{list-style:none;border: 1px solid #000;background-color: #ffd600}
    ul {
        width: 300px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 50px;
        position: absolute; //画重点,这里可以实现平滑过渡
        top: 0; //画重点
        left: 0; //画重点
    }
    ul li {
        height: 50px;
        display: grid;
        justify-items: center;
        align-items: center;
    }
    ul li > p{
        align-self: center;
    }
    li:nth-child(1){
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    li:nth-child(2){
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    li:nth-child(3){
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
</style>

(function (root, global) {
  var top = document.getElementById('aboveTab').offsetHeight;
  var belowObj = document.getElementById('belowTab');
  function scrollTimeout () {
    var scroll;
    clearTimeout(scroll);
    scroll = setTimeout(scrollEvent, 50)
  }
  function scrollEvent () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var tabObj = document.getElementById('tab');
    if (scrollTop > top) {
      tabObj.style.position = 'fixed';
      tabObj.style.top = '0';
    }
    else {
      tabObj.style.position = 'relative';
      tabObj.style.top = 'auto';
    }
  }
  global.addEventListener('scroll', scrollTimeout)
})(this, window)

转载于:https://my.oschina.net/u/4085373/blog/3018859