Bootstrap affix not working with bootstrap class
I am relatively new to bootstrap and trying to design my page with bootstrap affix. Here in code When I removes my col-lg-6 class from that is located inside affix targeted div it works perfectly fine but it doesn't work with given bootstrap class is applied there. I tried after removing that particular class at that time it works exactly fine.
<body id="top" data-spy="scroll" data-target="#header">
<header id="header" style="background-position: 0% 0px;">
<a class="image avatar" style="cursor: pointer;">
<img src="resources/images/Nimesh.jpg" alt=""></a>
<h1><strong>Ata at Turpis</strong>, cep curae tempus<br> adipiscing erat ultrices laoreet<br> aliquet ac Adipiscing.</h1>
<ul class="nav nav-tabs nav-stacked" data-spy="affix">
<li class="active"><a href="#section-1">Section One</a></li>
<li><a href="#section-2">Section Two</a></li>
<li><a href="#section-3">Section Three</a></li>
<li><a href="#section-4">Section Four</a></li>
<li><a href="#section-5">Section Five</a></li>
</ul>
</header>
<div id="profileImage">
</div>
<div id="main">
<div id="section-1" class="background">
<div class="col-lg-6">
<!--content 1a -->
</div>
<div class="col-lg-6">
<!--content 1a -->
</div>
</div>
<div id="section-2" class="background">
<div class="col-lg-6">
<!--content 2a -->
</div>
<div class="col-lg-6">
<!--content 2b -->
</div>
</div>
<div id="section-3" class="background">
<div class="col-lg-6">
<!--content 3a -->
</div>
<div class="col-lg-6">
<!--content 3b -->
</div>
</div>
<div id="section-4" class="background">
<div class="col-lg-6">
<!--content 4a -->
</div>
<div class="col-lg-6">
<!--content 4b -->
</div>
</div>
<div id="section-5" class="background">
<div class="col-lg-6">
<!--content 5a -->
</div>
<div class="col-lg-6">
<!--content 5b -->
</div>
</div>
</div>
</body>
Answer
This issues could be broken down into 2 parts:
- To use Bootstrap Grid System (e.g. col-lg-6)
- To use Bootstrap Affix with your secions
1. Bootstrap Grid System
To make the grid system working correctly, 3 classes are required: .container, .row, .col-xs-*.
.container: Should be add to the wrapper of your document..row: when you want to setup the columns, you have to wrap those columns with a.rowwrapper..col-xs-*: This is where you can set the width of your content.
So your document should be something like this:
<div class="container">
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-3"></div>
</div>
</div>
The document for the grid system is here.
In your case, it seems like you didn't provide .row nor .container for your columns, so the actual layouts would be broken and unexpected to some degree. I think this is probably the reason why if you remove those col-lg-* classes it works as you want.
2. Bootstrap Affix
The official document for Affix is pretty vague actually. Basically, when you scroll down your document, the <div data-spy="affix"> element will shift from the following states:
- Add
.affix-topto your spy element when the page is loaded - Whenever you scroll to the value of
data-offset-top, it will remove the.affix-topclass and add a.affixclass to the same element. - Whenever you scroll to the value of
data-offset-bottom, it will remove the.affixclass and add a.affix-bottomclass to the same element.
As the document mentioned, you HAVE TO set the css rules for these classes to make the affix plugin works.
There are 3 important rules you have to set:
1. The width of .affix-top, .affix, .affix-bottom
2. The position you want for your affix element when it is fixed
3. Recover the .affix-bottom position from fixed to absolute
So your css would be something like this:
.affix {
top: 0;
width: 100%;
}
.affix-top {
width: 100%;
}
.affix-bottom {
position: absolute;
width: 100%;
}
Here's a rough Codepen example for using affix. I've copied your codes and it works whether you add col-lg-6 in your section or not. You may resize the window to see your 2 columns layout.
One thing need mention is that I am not quite sure why you put your affix element in your header since it is used for showing the section title list on sidebar in most design cases. With that in sense, I move it out from the header to the main area with a column setting in grid.
Hope this would help.