javascript - 位置 : fixed in Materialize css modal not working

Question

我希望模态框的标题在模态框滚动时固定，但是位置:固定；不管用。我正在使用 Materialize CSS 进行模态构建。但是 position:sticky 正在工作。

$(document).ready(()=>{
   $('#missionModal').modal();
});

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
    <div class="">
        <div style="position:fixed;width: 100%;top:0px;left:0px;height:100px;background-color:#0a2701">

        </div>
        <div style="margin-top:100px;height:550px">
            <p>This ois naven don</p>
        </div>
    </div>
    <div style="position: absolute;width: 100%;bottom:0px;left:0px;" class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
    </div>
</div>

<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
    <i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>

Answer 1

也许试试这个。我重构了您的 HTML 和 CSS 代码:

只需确定哪个是您的标题，并在您的模态主体上提供一个固定高度即可滚动。而且，materialize css 有一个默认的 overflow-y: auto 我只是给它初始值，这样整个模式将不可滚动。

请看我的代码:

$(document).ready(()=>{
   $('#missionModal').modal();
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.modal {
  overflow: initial !important;
}

.modal-header {
  height: 100px;
  background: #0a2701;
  font-size: 40px;
  padding: 20px;
  color: #ffffff;
}

.modal-body {
  overflow-y: auto;
  height: 120px;
background: #fff;
}

.modal-body div {
  height:550px
}

.modal-close {
  float: right;
  display: inline-block;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet"/>
<div id="missionModal" class="modal">
  <div class="modal-header">This is a header.</div>
        <div class="modal-body">
          <div>
            <p>This ois naven don</p>
          </div>
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
</div>

<a id="missionButton" class="btn-floating btn-large modal-trigger" href="#missionModal" style="background-color: #004d40">
    <i id="missionArrow" style="font-size:55px;" class="large material-icons">info</i>
</a>