位置：在Materialize css模式中固定不工作答案

【问题标题】：position : fixed in Materialize css modal not working位置：在Materialize css模式中固定不工作
【发布时间】：2020-03-18 02:52:49
【问题描述】：

我希望在模态框滚动时固定模态框的标题，但位置：固定；不管用。我正在使用 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>

【问题讨论】：

“不工作”是什么意思？您在此处发布的代码中的.modal 类具有display: none。您需要将其更改为 display: block 之类的内容。这能解决你的问题吗？
我希望固定模态标题但它是可滚动的，.modal 是 Materialize CSS 库类，这不是原因

标签： javascript jquery html css materialize

【解决方案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>

【讨论】：