html - 使用 twitter bootstrap 修复标题面板

Question

在下面的代码中，当您向下滚动页面时，页眉也会滚动。我需要修复标记为绿色的页眉面板。我该怎么做？

这个问题之前有人问过。但是，我无法理解解决方案。 link

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-body" style="background:rgb(200,255,200)">
	aaaa, bbbb, ccc
</div>

<div>
	<div>content 1</div>
	<div>content 2</div>
	<div>content 3</div>
	<div>content 4</div>
	<div>content 5</div>
	<div>content 6</div>
	<div>content 7</div>
	<div>content 8</div>
	<div>content 9</div>
	<div>content 10</div>
	<div>content 11</div>
	<div>content 12</div>
	<div>content 13</div>
	<div>content 14</div>
	<div>content 15</div>
	<div>content 16</div>
	<div>content 17</div>
	<div>content 18</div>
	<div>content 19</div>
	<div>content 20</div>
	<div>content 21</div>
	<div>content 22</div>
	<div>content 23</div>
	<div>content 24</div>
	<div>content 25</div>
	<div>content 26</div>
	<div>content 27</div>
	<div>content 28</div>
	<div>content 29</div>
	<div>content 30</div>
	<div>content 31</div>
	<div>content 32</div>
	<div>content 33</div>
	<div>content 34</div>
	<div>content 35</div>
	<div>content 36</div>
	<div>content 37</div>
	<div>content 38</div>
	<div>content 39</div>
	<div>content 40</div>
	<div>content 41</div>
	<div>content 42</div>
	<div>content 43</div>
	<div>content 44</div>
	<div>content 45</div>
	<div>content 46</div>
	<div>content 47</div>
	<div>content 48</div>
	<div>content 49</div>
	<div>content 50</div>
	<div>content 51</div>
	<div>content 52</div>
	<div>content 53</div>
	<div>content 54</div>
	<div>content 55</div>
	<div>content 56</div>
	<div>content 57</div>
	<div>content 58</div>
	<div>content 59</div>

</div>

Answer 1

简单重写

<div class="panel-body" style="background:rgb(200,255,200)">

到

<div class="panel-body" id="head" style="background:rgb(200,255,200)">

并将其添加到您的自定义 CSS 文件中:

#head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

---

编辑:您可以只使用 Bootstrap 的“navbar-fixed-top”类。

这是带有内联 CSS 的更新代码段:

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="panel-body navbar-fixed-top" style="background:rgb(200,255,200);">
	aaaa, bbbb, ccc
</div>

<div>
	<div style="margin-top: 50px;">content 1</div>
	<div>content 2</div>
	<div>content 3</div>
	<div>content 4</div>
	<div>content 5</div>
	<div>content 6</div>
	<div>content 7</div>
	<div>content 8</div>
	<div>content 9</div>
	<div>content 10</div>
	<div>content 11</div>
	<div>content 12</div>
	<div>content 13</div>
	<div>content 14</div>
	<div>content 15</div>
	<div>content 16</div>
	<div>content 17</div>
	<div>content 18</div>
	<div>content 19</div>
	<div>content 20</div>
	<div>content 21</div>
	<div>content 22</div>
	<div>content 23</div>
	<div>content 24</div>
	<div>content 25</div>
	<div>content 26</div>
	<div>content 27</div>
	<div>content 28</div>
	<div>content 29</div>
	<div>content 30</div>
	<div>content 31</div>
	<div>content 32</div>
	<div>content 33</div>
	<div>content 34</div>
	<div>content 35</div>
	<div>content 36</div>
	<div>content 37</div>
	<div>content 38</div>
	<div>content 39</div>
	<div>content 40</div>
	<div>content 41</div>
	<div>content 42</div>
	<div>content 43</div>
	<div>content 44</div>
	<div>content 45</div>
	<div>content 46</div>
	<div>content 47</div>
	<div>content 48</div>
	<div>content 49</div>
	<div>content 50</div>
	<div>content 51</div>
	<div>content 52</div>
	<div>content 53</div>
	<div>content 54</div>
	<div>content 55</div>
	<div>content 56</div>
	<div>content 57</div>
	<div>content 58</div>
	<div>content 59</div>

</div>

请记住，在这种情况下，由于容器重叠，您必须调整内容。文档:http://getbootstrap.com/components/#navbar-fixed-top