使用twitter引导修复标题面板

在以下代码中，当您向下滚动页面时，标题也会滚动。我需要修复标记为绿色的标题面板。我怎样才能做到这一点？使用twitter引导修复标题面板

此问题先前被询问。但是，我无法理解解决方案。 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)"> 
 
\t aaaa, bbbb, ccc 
 
</div> 
 

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

 
</div>

来源

2015-08-23 barej

简单地重写

<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; 
}

编辑：你可以用引导的“导航栏固定顶”一流的。

这是你更新的代码片段，其中内联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);"> 
 
\t aaaa, bbbb, ccc 
 
</div> 
 

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

 
</div>

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

来源

2015-08-23 01:07:02 Paul

感谢，一个问题是，内容1和2以及一半的内容编辑3我的帖子的标题 – barej

下被隐藏起来，确保添加**顶部：0; **到头元素和一个** margin-top：50px; **（例如，像素值应该等于您的标题的高度）到第一个Content-Box。当然，你不应该像我这样内联，只是为了片段。 – Paul

再次编辑它，从来没有真正使用Bootstrap，有一个类为您的需要。现在应该没问题。 – Paul

加入这个head到您的顶部标题和content到包含内容的股利。

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

#content { 

    margin-top: 50px; 
}

<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" id="head" style="background:rgb(200,255,200); position: fixed; 
 
top: 0; 
 
left: 0; 
 
right: 0;"> 
 
\t aaaa, bbbb, ccc 
 
</div> 
 

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

 
</div>

来源

2015-08-23 01:27:25

使用twitter引导修复标题面板

回答

相关问题