html - 页面上方的页眉滚动 HTML CSS

Question

我正在做一个带 Angular 页面，我传递了标题在我页面滚动上方的信息，知道如何解决这个问题吗？

header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.60);
}

.element {
    display: inline-block !important;
    padding: 5px;
    color: rgb(255, 230, 194);
}

.material-icons {
    font-size: 60px;
}

<header>
    <div class="form-inline">
        <div class="element">
            <i class="material-icons">
            change_history
        </i>
        </div>
        <div class="element">
            <h3>Formulario</h3>
        </div>
    </div>
</header>

我希望你保留 display:sticky 给你的属性，但它是一个固定位置，可以在我的页面上滚动，我会非常感谢你的帮助!!

Answer 1

header {
position: fixed;
top: 0;
right: 0;
z-index: 1;
width: 100%;
background-color: rgb(0, 0, 0, 0.60);
height: 88px;
}

.element {
display: inline-block !important;
padding: 5px;
color: rgb(255, 230, 194);
}

.material-icons {
font-size: 60px;
}
.mainbox{
 height:150px; 
 overflow-y:auto
}

<header>
   <div class="form-inline">
      <div class="element">
        <i class="material-icons">
        change_history
        </i>
      </div>
      <div class="element">
        <h3>Formulario</h3>
      </div>
   </div>

<div class="mainbox">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud               
   exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
   irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
   pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
   officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
  </header>