Fix the header pannel using twitter bootstrap

barej
August 23, 2015
232 views
1 vote
2 Answers

In the following code, when you scroll down the page, the header is scrolled too. I need to fix the header panel marked as green. How can I do that?

This question is asked previously. However, I cannot understand the solution. 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>

Answers

Simply rewrite

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

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

and add this to your custom CSS-File:

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

Edit: You can just use Bootstrap’s “navbar-fixed-top”-Class.

Here is your updated Snippet with inline-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>

Keep in mind, that you have to adjust your content in this case, because of overlapping containers.
Documentation: http://getbootstrap.com/components/#navbar-fixed-top

Add this head to your top header and content to the div containing your contents.

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

Please signup or login to give your own answer.

Click here to cancel reply.