【每日技巧】滑动到目标位置，目标固定在顶部

1、纯CSS实现

用了最新的position属性sticky粘性布局,大部分浏览器以及微信小程序已支持此属性，其优点是能够自然的固定在指定位置以及多固定元素时会平滑的依次顶替，缺点是受限于父元素，与其说是position：relative和position：fixed的结合体不如说是position：relative和position：absolute的结合体。 点击查看demo

HTML：

<div class="g-box">
  <div class="auto-pos">自动定位</div>
  <div style="height: 900px;background: url('https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/19/169936a894b4a755~tplv-t2oaga2asx-image.image')"></div>
</div>

CSS：

.g-box{
    position: relative;
    height: 300px;
    overflow-y: auto;
}
.auto-pos {
    margin-top: 100px;
    line-height: 30px;
    position: sticky;
    top: 20px;
    background: #ccc;
}

2、JS实现

普通的利用JS实现目的。 点击查看demo

HTML：

<div class="g-box" id="eleBox">
  <div class="auto-pos" id="elePos">自动定位</div>
  <div style="height: 900px;background: url('https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/3/19/169936a894b4a755~tplv-t2oaga2asx-image.image')"></div>
</div>

CSS：

.g-box{
    position: relative;
    height: 300px;
    overflow-y: auto;
}
.auto-pos {
    margin-top: 100px;
    line-height: 30px;
    background: #ccc;
}

JS：

const eleBox = document.getElementById('eleBox');
const elePos = document.getElementById('elePos');
const dist = 30;
const eleTop = elePos.offsetTop;
if (eleBox && elePos) {
  eleBox.addEventListener('scroll', function (e) {
    if (eleBox.scrollTop > eleTop - dist) {
      elePos.style.cssText = `position:fixed;margin:0;top:${eleBox.offsetTop + dist}px;width:${eleBox.clientWidth}px`;
      elePos.nextElementSibling.style.marginTop = `${elePos.offsetHeight + eleBox.offsetTop + dist}px`;
    } else {
      elePos.style.cssText = 'position:inherit;';
      elePos.nextElementSibling.style.marginTop = `0`;
    }
  });
}