Reputation: 53
Bootstrap Affix with Bootstrap col-xx-yy class
I'm trying to use Bootstrap affix to fix navigator(horizontal) to the top when scrolling down. The navigator gets affixed to the top on scroll down but the scrollable content scrolls over it instead of under it.
Some more background... Main body i.e scrollable content is a form that has bootstrap panels and entry fields that use col-md-* classes to format the layout. Use of this class seems to be adding "position:relative" attribute which seems to be causing the overlap.
My questions....I'm a CSS novice so
- I do not understand why position:relative content overlaps position:fixed(navigator).
- I do not understand why bootstrap adds position:relative to these components without the additional top, left, bottom or right attributes. Without one of these attributes isn't this same as "position:static" which is the default?
- Last, how do I fix this. I'm looking for a perferably a standard non-hack solution that does not break on a bootstrap upgrade.
Edit: While drafting this post I got an idea and added a positive z-index to the navigator and the scrollable content now scrolls behind the navigator. Is this the proper solution? I'm still looking for answers to my other questions though. Thank you.
*Edit 2: Found answers to all my affix problems here. https://www.jero.co.nz/blog/bootstrap-affix-plugin/ One other issue I had that wan't addressed here...if offset is zero gets affixed and unaffixed on a click as well as scroll. set the offset to 1.
Now I need to figure out how to mark this as resolved.*
Here is a fiddle I created using W3Schools affix example. https://jsfiddle.net/fLx60zvh/2/
Thanks for your help.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
/* Note: Try to remove the following lines to see the effect of CSS positioning */
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<div class="col-md-6">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
<div class="col-md-6">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</div>
</body>
</html>
Upvotes: 0
Views: 250
Answers (1)
Reputation: 53
Figured out how to resolve the issue.
Found answers to all my affix problems here. Great Blog! https://www.jero.co.nz/blog/bootstrap-affix-plugin/ One other issue I had that wan't addressed here...if offset is zero gets affixed and unaffixed on a click as well as scroll. set the offset to 1.
Upvotes: 1