I have pinned up/sticky navigation menu bar on top of my page and some tables. To make tables more interactive I use jQuery's DataTables. Before using jQuery everything was OK. Now, whenever I scroll down every table covers my menu and I can't even click on it for navigation.
Here is my pinned up/sticky navigation menu bar code, thank you for your help in advance.
CSS:
.sticky { position: fixed; height: 2.2em; width: 100%; top: 0; left: 0; background-color: rgb(224,224,224); }
.sticky li { display: inline-block; }
.sticky * { display: inline; }
HTML:
<div class="sticky">
<reportname>reportname</reportname>
<ul>
fly to:
<li> <a href=#Samples> Samples </a> </li>
<li> <a href=#Navigation> Navigation </a> </li>
<li> <a href=#Tables> Tables </a> </li>
<li> <a href=#Plots> Plots </a> </li>
</ul>
<reporthead>reporthead</reporthead>
</div>
For tables I use
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
<script>
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
and
<table id="example" class="display" cellspacing="0" width="100%">
Solved by adding
z-index: 9999;
to the
.sticky { ... }
Related
I have a Bootstrap 5 dropdown menu within a div. Clicking the icon causes the dropdown to appear, but only those dropdown options that overlap the parent div are able to be hovered/clicked.
In the screenshot below, the 'Action' option works correctly (as it overlaps the blue parent div), but hovering over either 'Another action' or 'Something else here' does nothing and clicking them just closes the menu.
I suspect the issue is the boundary option described here. I don't fully understand either the Bootstrap or the Popper documentation for this, but I assume I need to set that value to some sort of container div (or even body).
The Bootstrap documentation says that can only be done via javascript (not via data attributes), so I added this code:
var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
return new bootstrap.Dropdown(dropdownToggleEl, {
boundary: document.querySelector('#planContainer')
})
})
However, this does not appear to make any difference. It also makes no difference if I set boundary: document.getElementsByTagName("BODY")[0].
Any suggestions for where I'm going wrong would be greatly appreciated.
This is the code that I created from the fiddle and it works for me. Do you have something differently?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<style>
.formatToolbar {
margin: 20px auto;
width: 900px;
opacity: 0.8;
left: 0px;
z-index: 99;
color: white;
background-color: #42469D;
border-radius: 40px;
display: flex;
flex-direction: row;
justify-content: space-around;
padding-left: 15px;
padding-right: 15px;
}
.formatToolbarIconOuter {
margin: 12px ;
color: white ;
cursor:pointer;
text-align: center;
flex: 0 1 auto;
}
</style>
</head>
<body>
<div class="row">
<div class="formatToolbar">
<div class="formatToolbarIconOuter">
<span class="dropdown-toggle" type="button" data-bs-toggle="dropdown" id="fullColourCodeDropdown">
<i class="fas fa-palette"></i>
<div class="formatToolbarIconLabel">
Full seat <br />colour coding
</div>
</span>
<ul class="dropdown-menu" aria-labelledby="fullColourCodeDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<div class="row h-25">
Another div
<hr>
</div>
</body>
</html>
If you still see the problem, I think the parent element has an absolute position. Remove it from the element and it should work.
You code should have worked. The only reason to see the issue you describe is if the z-index of the "underneath" items are of a z-index greater than the BS default (this should be 1000).
Either lower the z-index of the "underneath" items, or increase the .dropdown-toggle z-index with a CSS override, e.g.;
.dropdown-toggle {
z-index: 90000;
}
My CSS style sheet doesn't seem to be working?
Anyone know why?
Code:
/* my css style sheet named "style" */
/* CSS Selector applicable to all elements which in this case are my html margin padding and box size */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
align-items: center;
padding: 20%;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drake</title>
<!-- Name of my website -->
<link rel="stylesheet" type="text/css" media="screen, projection" href="style.css">
<!-- Link to my css style sheet -->
</head>
<body>
<div class="navbar">
<!-- Navigation bar class created -->
<!-- May have to potentially change variable name-->
<div class="logo">
<!-- Logo class with navigation created -->
<img src="https://logo.clearbit.com/spotify.com" width="125px " alt="owl logo">
<!-- owl logo inserted and resized -->
</div>
<nav>
<!-- Naviagation element created .... -->
<ul>
<!-- Along with an ordered list of different pages subject to change -->
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
<li>Account</li>
</ul>
</nav>
</div>
</body>
</html>
If possible, could you please specify what result is expected or what are trying to achieve?
If you would like to make navigation "sticky" so it would be always visible to users even if they scroll down the page, then as an option you could try to add to your .navbar class CSS this:
.navbar {
position: fixed;
width: 100%;
}
If you are trying to put the nabber in the top left corner of the screen, you can remove the padding: 20% from your "navbar" class (.navbar).
I'm trying to change the class of an element in a nav bar. The idea is a basic clickable hamburger icon that shows a nav menu when clicked on.
This is the HTML. I'm trying to toggle the class name of the ul with the class of header-list to a class name header-list-open.
<body>
<!-- Start of Navigation Bar -->
<header>
<div class="nav-container">
<nav>
<h2 class="company-name">Sustained Garden Co</h2>
<ul class="header-list">
<!-- Navigation Links -->
<li class="header-list-item">About</li>
<li class="header-list-item">Services</li>
<li class="header-list-item">Gallery</li>
<li class="header-list-item">Contact</li>
</ul>
</nav>
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
</div>
</header>
<!-- End of Navigation Bar -->
<!-- Start of main content -->
<main></main>
<script src="script.js"></script>
</body>
This is the CSS that may be relevant.
.header-list {
height: 0;
overflow: hidden;
}
.header-list-open {
list-style: none;
position: absolute;
top: 100%;
right: 0;
}
This is the JS
var toggleClass = document.querySelector('.menu-toggle');
var classSwitch = document.querySelector('.header-list');
toggleClass.addEventListener('click', function () {
console.log('hello');
classSwitch.classList.toggle('header-list-open');
});
I've tried this version of the JS code and several others. The console is logging "hello" so the actual click is working. Just not the class toggle.
When you apply the other class the other CSS rule is still being applied so your CSS is now:
.header-list {
height: 0;
overflow: hidden;
list-style: none;
position: absolute;
top: 100%;
right: 0;
}
So you either need to remove the class header-list or set the height and overflow in the open class.
Or instead of setting the height/overflow, why don't you just set the display to none and set it to block in open?
I have got a code for navbar which is working perfectly... Also i have got the code for a collapsable side bar which is also working perfectly. But now i dont understand how to add these two together so that i get a page with navbar and sidebar together.
This is my code for navbar - (complete with html):
<html>
<head>
<title>Navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
<!-- Font styles -->
<style type="text/css">
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
</style>
</head>
<body style="background-color:#E6E6FA">
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
</body>
</html>
Those links in the head tag - i got it by simply googling.
Also, my sidebar code is here -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
But not now. how do I combine these? I want a page which will have both the top navbar and the sidebar. I have all combinations of pasting the codes but with no luck. What i have latest now - after combining these two is this -
* {
margin: 0;
padding: 0;
}
body {
font-family: Open Sans, Arial, sans-serif;
overflow-x: hidden;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
transform: translate3d(-200px, 0, 0);
transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate3d(0, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-toggle-btn {
display: block;
position: absolute;
left: 200px;
width: 40px;
height: 40px;
background-color: #666;
}
.content {
padding-top: 300px;
height: 2000px;
background-color: #ccf;
text-align: center;
transition: transform 0.4s ease;
}
.active-nav .content {
transform: translate3d(200px, 0, 0);
}
#import "http://designmodo.github.io/Flat-UI/dist/css/flat-ui.min.css";
#import "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
#import "https://daneden.github.io/animate.css/animate.min.css";
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<link rel="stylesheet" href="styles.css">
<!--Navbar-->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Navbar khatam-->
</head>
<body>
<!--Navigation bar-->
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-inner">
<!--Container class div-->
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.jpg" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav navbar-left">
<li> </li> <!-- TO leave some space after logo-->
<li class="active">Home </li>
<li class = "dropdown">
Functionalities <span class = "caret"></span>
<ul class = "dropdown-menu">
<li>Insurances</li>
<li class="nav-divider"></li><li>Loans</li>
<li class="nav-divider"></li><li>Card Privilages</li>
</ul>
</li>
<li>Join Us</li>
<li>About Us</li>
</ul>
<!-- Right hand side navbar -->
<ul class ="nav navbar-nav navbar-right">
<li>Customer</li>||
<li>Employee</li>
</ul>
</div>
</div>
</div>
</nav>
<!--Navbar End-->
<!-- Sidebar nav -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<!-- Sidebar Ends -->
<div class="content">
<h1>This is content</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('active-nav');
e.preventDefault();
});
})();
</script>
</body>
</html>
By combining it like this, The side bar is working correctly but the top navbar is just a big white block. Nothing in there.
Divide both the sections differently. Put both in one row and give col-2 to the sidebar side and col-10 to the nav-bar side. This way you'll be having a side and nav-bar both side by side, you can also use the nav-bar side for creating a normal webpage. All the best!
First of all, your missing an opening style tag just after your <title>both</title>. (You have a closing /style tag just before your nav). This will apply inline styles for the time being. You should see what you want to achieve now.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Both</title>
<style>
/* styles */
</style>
</head>
But ultimately, you need to copy these styles into a CSS file and then link the CSS file in your HTML like this: <link rel="stylesheet" href="css/styles.css">. That is presuming, your stylesheet is called "styles.css" and is inside a 'CSS' folder.
Have a look at the HTML link tag for linking your external CSS file.
I'm attempting to make a nav bar that appears at the bottom of the viewable page when the site is first loaded, then as the user scrolls down, the nav bar scrolls up, and eventually becomes fixed to the top. I'm using Bootstrap, just like this site, but I can't figure out how this site did it. Any help?
Here's the site with the nav bar I'm trying to emulate: http://www.blastprocessor.co.uk/
Here's my navigation html and css code:
HTML:
<div class="navbar navbar-fixed-top" id="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Services</li>
<li>Contact</li>
</ul><!-- /.nav -->
</div><!--/.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
And here's my CSS:
.navbar-fixed-top,.navbar-fixed-bottom{position:fixed; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
.navbar .nav > li a{
color:white; background:rgba(0,0,0,0.2); text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
color:white; ; background:#F90; text-shadow:none; font-size:1.7em; font-family: marvel, serif; padding:.5em 1.3em; margin:1em 2em;
}
.navbar .nav > li {padding:2em;}
.navbar.navbar-fixed-top .navbar-inner{background: rgba(255, 255, 255, 0);}
.navbar .nav, .navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
padding:0 2em;
}
.navbar-inner {text-align:center;}
.navbar .navbar-inner, .navbar .navbar-inner {border: none; box-shadow: none; filter: none;}
I was searching for this very same thing. I had read that this was available in Bootstrap 3.0, but I was having no luck in actually implementing it. This is what I came up with and it works great. Very simple jQuery and Javascript.
Here is the JSFiddle to play around with... http://jsfiddle.net/CriddleCraddle/Wj9dD/
The solution is very similar to other solutions on the web and StackOverflow. If you do not find this one useful, search for what you need. Goodluck!
Here is the HTML...
<div id="banner">
<h2>put what you want here</h2>
<p>just adjust javascript size to match this window</p>
</div>
<nav id='nav_bar'>
<ul class='nav_links'>
<li>Sign In</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
<div id='body_div'>
<p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>
Here is the CSS...
html, body {
height: 4000px;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
#body_div {
top: 0;
position: relative;
height: 200px;
background-color: green;
}
#banner {
width: 100%;
height: 273px;
background-color: gray;
overflow: hidden;
}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
}
//the below css are for the links, not needed for sticky nav
.nav_links {
margin: 0;
}
.nav_links li {
display: inline-block;
margin-top: 4px;
}
.nav_links li a {
padding: 0 15.5px;
color: #3498db;
text-decoration: none;
}
Now, just add the javacript to add and remove the fix class based on the scroll position.
$(document).ready(function() {
//change the integers below to match the height of your upper div, which I called
//banner. Just add a 1 to the last number. console.log($(window).scrollTop())
//to figure out what the scroll position is when exactly you want to fix the nav
//bar or div or whatever. I stuck in the console.log for you. Just remove when
//you know the position.
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() > 550) {
$('#nav_bar').addClass('navbar-fixed-top');
}
if ($(window).scrollTop() < 551) {
$('#nav_bar').removeClass('navbar-fixed-top');
}
});
});
Note (2015): Both question and the answer below apply to the old, deprecated version 2.x of Twitter Bootstrap.
This feature of making and element "sticky" is built into the Twitter's Bootstrap and it is called Affix. All you have to do is to add:
<div data-spy="affix" data-offset-top="121">
... your navbar ...
</div>
around your tag and do not forget to load the Bootstrap's JS files as described in the manual. Data attribute offset-top tells how many pixels the page is scrolled (from the top) to fix you menu component. Usually it is just the space to the top of the page.
Note: You will have to take care of the missing space when the menu will be fixed. Fixing means cutting it off out of your page layer and pasting in different layer that does not scroll. I am doing the following:
<div style="height: 77px;">
<div data-spy="affix" data-offset-top="121">
<div style="position: relative; height: 0; width: 100%;">
<div style="position: absolute; top: 0; left: 0;">
... my menu ...
</div>
</div>
</div>
</div>
where 77px is the height of my affixed component.
//in html
<nav class="navbar navbar-default" id="mainnav">
<nav>
// add in jquery
$(document).ready(function() {
var navpos = $('#mainnav').offset();
console.log(navpos.top);
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
}
});
});
Here is the jsfiddle to play around : -http://jsfiddle.net/shubhampatwa/46ovg69z/
EDIT:
if you want to apply this code only for mobile devices the you can use:
var newWindowWidth = $(window).width();
if (newWindowWidth < 481) {
//Place code inside it...
}
Bootstrap 4 - Update 2020
The Affix plugin no longer exists in Bootstrap 4, but now most browsers support position:sticky which can be used to create a sticky after scoll Navbar. Bootstrap 4 includes the sticky-top class for this...
https://codeply.com/go/oY2CyNiA7A
Bootstrap 3 - Original Answer
Here's a Bootstrap 3 example that doesn't require extra jQuery.. it uses the Affix plugin included in Bootstrap 3, but the navbar markup has changed since BS2...
<!-- Content Above Nav -->
<header class="masthead">
</header>
<!-- Begin Navbar -->
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="divider"></li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
..
</li>
<li>
..
</li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
Working demo/template: http://bootply.com/69848
This worked great for me. Don't forget to put a filler div in there where the navigation bar used to be, or else the content will jump every time it's fixed/unfixed.
function setSkrollr(){
var objDistance = $navbar.offset().top;
$(window).scroll(function() {
var myDistance = $(window).scrollTop();
if (myDistance > objDistance){
$navbar.addClass('navbar-fixed-top');
}
if (objDistance > myDistance){
$navbar.removeClass('navbar-fixed-top');
}
});
}
Use Bootstrap Affix:
/* 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;
}
<!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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</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">Basic Topnav</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<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>
</body>
</html>
You could use position: sticky
#navbar {
position: sticky;
top: 0px;
}
The #navbar should be a direct child of the body though.
For Bootstrap 4, a new class was released for this. According to the utilties docs:
Apply the class sticky-top.
<div class="sticky-top">...</div>
For further navbar position options, visit here.
Also, keep in mind that position: sticky; is not supported in every browser so this may not be the best solution for you if you need to support older browsers.
In answer to Shubham Patwa: This way, the page is "jumpy" soon as the class "navbar-fixed-top" applies. That's because the #mainnav is throwen in and out of the document's DOM flow. This can result in an ugly UX if the page has a "critical height", jumping between fixed and un-fixed #mainnav position.
I altered the code this way, which seems to work fine (not pixel-perfect, but fine):
$(document).ready(function() {
var navpos = $('#mainnav').offset();
var navheight = $('#mainnav').outerHeight();
$(window).bind('scroll', function() {
if ($(window).scrollTop() > navpos.top) {
$('#mainnav').addClass('navbar-fixed-top');
$('body').css('marginTop',navheight);
}
else {
$('#mainnav').removeClass('navbar-fixed-top');
$('body').css('marginTop','0');
}
});
I have found this simple javascript snippet very useful.
$(document).ready(function()
{
var navbar = $('#navbar');
navbar.after('<div id="more-div" style="height: ' + navbar.outerHeight(true) + 'px" class="hidden"></div>');
var afternavbar = $('#more-div');
var abovenavbar = $('#above-navbar');
$(window).on('scroll', function()
{
if ($(window).scrollTop() > abovenavbar.height())
{
navbar.addClass('navbar-fixed-top');
afternavbar.removeClass('hidden');
}
else
{
navbar.removeClass('navbar-fixed-top');
afternavbar.addClass('hidden');
}
});
});