user6604616
Reputation:
How To Set Bootstrap Navigation Menu To Stays At Top Of The Page While Scrolling
I'm making a site in Bootstrap. I added the navigation bar below the header part. Basically I want my navigation bar to stays at top of the page while scrolling. I saw the Bootstrap documentation to see how this feature can be done but I didn't find anything. So here's the link to my site so you can see how it is. Please if you know how to solve this problem ,please let me know.
Here's the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Daygostar.ir</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="styles.css" rel="stylesheet"/>
<link href="css/1140.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script>
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
</script>
<script type="text/javascript">
var ypos,image;
function parallex() {
image = document.getElementById('image');
ypos = window.pageYOffset;
image.style.top = ypos * .7+ 'px';
}
window.addEventListener('scroll', parallex),false;
</script>
</head>
<body data-spy="scroll" data-target="#my-navbar" >
<div id="wrapper">
<div id="header">
<div id="image">
<div class="container12">
<ul id="scene">
<li class="layer" id="l1" data-depth="0.40"><img src="img/larg-logo.png"></li>
<li class="layer" id="l2" data-depth="0.80"><img src="img/small-logo.png"></li>
</ul>
</div>
</div>
</div>
<div id="content">
<nav class="navbar navbar-default" id="topMenu">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse BKoodakBold" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="navigationMenu">
<li><a href="#">تماس با ما</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">پشتیبانی افلاین</a></li>
<li><a href="#">نمونه کارها</a></li>
<li><a href="#">سوالات متداول</a></li>
<li><a href="#">تعرفه ها</a></li>
<li><a href="#">خدمات ما</a></li>
<li><a href="#">دانستنی ها</a></li>
<li><a href="#">مقالات سایت</a></li>
<li><a href="#">پکیج ها</a></li>
<li class="active"><a href="#">صفحه اصلی</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">منوی کاربران <span class="caret"></span></a>
<ul class="dropdown-menu" id="dropDown">
<li><a href="#">ورود کاربران</a></li>
<li><a href="#">ثبت نام کاربران</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="page-header BHoma" id="pageHeader">
<h1>
خدمات دپارتمان طراحی سایت دی گستر
<hr class="style18">
<small style="padding-right:100px;padding-left:100px;">... طراحی انواع سایت های شخصی، فروشگاهی، شرکتی، سازمانی، خبری و</small>
</h1>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-1.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-2.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-3.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-4.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
</div>
<div class="container-fluid">
<div class="row" id="paraDiv">
<div class="col-md-8 col-md-offset-2" id="contentDiv"><span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> <strong>ALL STACKS INCLUDED.</strong> NO OTHER THEME ON THE PLANET HAS THIS VERSATILITY!</div>
<div class="col-md-offset-2"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>Polina</h1>
<p>filmed by Alexander Wagner 2011
<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
</div>
</div>
</div>
<footer>
</footer>
<!-- Scripts -->
<script src="deploy/parallax.min.js"></script>
<script>
// Pretty simple huh?
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script src="js/script.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</div>
</body>
</html>
Upvotes: 0
Views: 4326
Answers (3)
walidvb
Reputation: 322
To have a sticky header(one that gets fixed as you scroll), you'll need to bind a function to the window.onscroll event that will check if the header is passed the current scroll position, and add the bootstrap's navbar-fixed-top class to it:
$(window).on('scroll', fixHeader);
var header = $('nav');
var headerOffset = header.offset().top;
function fixHeader(evt){
var currentScroll = $(window).scrollTop()
if(headerOffset <= currentScroll){
header.addClass('navbar-fixed-top')
}
else{
header.removeClass('navbar-fixed-top');
}
}
https://jsfiddle.net/hgLzqnqp/2/
You'll also want to push the content following the nav down, as it will be removed from the rendering flow. Here is an example of how to do that:
https://jsfiddle.net/hgLzqnqp/3/
Hopefully position: sticky will come to CSS at some point, and there are already some polyfills for that: https://github.com/filamentgroup/fixed-sticky
Upvotes: 1
JQluv
Reputation: 242
You can fix the navigation bar to the top of the browser by adding a few simple css codes to your bootstrap theme. The class is sticky-nav included in bootstrap. Here is the css example and below that is a nav example using the css example.
.page-header {
padding-top: 80px; /* nav height */
}
.sticky-nav {
position:fixed;
top:0;
width: 100%;
z-index: 99999999;
}
you can also have it only do it for desktop by doing it like this:
@media (min-width: 768px) {
.page-header {
padding-top: 80px; /* nav height */
}
.sticky-nav {
position:fixed;
top:0;
width: 100%;
z-index: 99999999;
}
}
Here is the HTML navigation code:
<nav class="row navbar navbar-trans sticky-nav navbar-white">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<img class="icon-x" src="img/m/x.svg" alt="Close Menu">
</button>
<a class="navbar-brand-trans" href="#"><img src="/img/logo-top-t.svg" alt="Logo">
</a><a class="navbar-brand-white" href="#"><img src="/img/logo-top-w.svg" alt="Logo">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/" id="home" class="active">Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" id="serv-dropdown">Services <span class="glyphicon glyphicon glyphicon-menu-down"></span></a>
<ul class="dropdown-menu">
<div class="col-md-1 visible-md visible-lg"></div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-3 heading hidden-xs">
<p>Services</p>
</div>
<div class="col-sm-3 hcol">
<li><a href="/consulting">Consulting Services</a></li>
<li><a href="/custom">Custom Software</a></li>
<li><a href="/django">Development Django</a></li>
<li><a href="/mobiledevelopment">Development Mobile</a></li>
</div>
<div class="col-sm-3 hcol">
<li><a href="/php">Development PHP</a></li>
<li><a href="/python">Development Python</a></li>
<li><a href="/webdevelopment">Web Development</a></li>
</div>
<div class="col-sm-3 hcol hidden-xs">
<span>Our Experience Drives</span> <br>
<span>Your Success</span> <br><br>
<button type="button" name="projects" class="jq-btn blue">OUR PROJECTS</button>
</div>
</div>
<div class="col-md-1 visible-md visible-lg"></div>
</ul>
</li>
<li><a href="/projects">Projects</a></li>
<li><a href="/team">Team</a> </li>
<li><a href="/blog">Blog</a></li>
<li>
<div class="col-xs-12 visible-xs text-center"><a id="contact-btn" onclick="toggleContact();">Contact Us</a></div>
<a class="hidden-xs" id="contact-btn" onclick="toggleContact();">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
Upvotes: 0
Robert
Reputation: 6977
Please read the Bootstrap Documentation for .navbar here:
http://getbootstrap.com/components/#navbar
The Bootstrap Framework has native support for a fixed navigation by any of the following classes:
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-static-top
Each one functions differently, so pick the one that best addresses your needs for this project.
Upvotes: 2
Related Questions
- Navbar stick to top of screen when scrolling past
- How can I fix the bootstrap navbar to the top after a div was scrolled?
- Make Scrolling NavBar Stick At Top Of Browser In Bootstrap
- Fix Bootstrap Navbar to top on scrolling
- How do I keep my navigation bar fixed on top while scrolling?
- Bootstrap. Scroll link menu and fix the navbar at the top of the page
- Moving navigation bar to the top while scrolling down in HTML
- Bootstrap Fixing navigation bar on top when scrolling
- In Twitter Bootstrap How can I fix my menu bar on the top while scrolling
- How to keep my top menu stay fixed on scroll?