vue吸顶效果的快速实现

``vue吸顶效果

<div class="container">
    <h1>这是头部</h1>
    <h1>这是头部</h1>
    <h1>这是头部</h1>
    <h1>这是头部</h1>
    <h1>这是头部</h1>
    <h1>这是头部</h1>    
    <h1>这是头部</h1>
    <h1>这是头部</h1>
    <h1>这是头部</h1>
    <h1>这是头部</h1>
    <h1 class="fixedArea">这是吸顶部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
    <h1>这是以下部分</h1>
  </div>

.container{
  padding:40px;
 
}
 h1{
    width:100%;
    background-color: #eee;
    margin-top:10px;
  }
  .fixedArea{
    position: sticky;
    top:0;
    background-color: aqua;
  }

描述：此方法简单快速，纯css搞定，适合pc端自适应布局的吸顶效果，这里如果用滚动条判断高度，添加样式fixed会导致吸顶栏宽度有问题，原始宽度是相对于父元素100%，当设置fixed之后，吸顶栏固定定位就脱离了文档流，相对于浏览器窗口定位，导致宽度比原来的宽