Question

在下面的代码中，当您向下滚动页面时，标题也会滚动。我需要修复标有绿色的标题面板。我怎么能这样做？

此问题先前已被询问。但是，我无法理解解决方案。 link

＆＃13;

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

＆＃13;

Answer 1

简单地重写

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<a class="btn_full" id="myBtn" href="/traveltour/index.php/paypal/buy?theTotal=12&amp;description=Pinko+Pallino+&amp;quantity=1&amp;tour_id=6&amp;tourextra_id=11&amp;guide_id=35">Go to payment</a>

<select name="" id="Toursextra_count">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

到

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

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

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

编辑：你可以使用Bootstrap＆＃34; navbar-fixed-top＆＃34; -Class。

这是您使用inline-CSS更新的Snippet：

＆＃13;

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

＆＃13;

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

Answer 2

将此head添加到您的热门标题，将content添加到包含您的内容的div。

#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;">
	aaaa, bbbb, ccc
</div>

<div id="content" style="margin-top: 50px">
	<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>

使用twitter bootstrap修复标题面板

2 个答案: