CSS Question
Navbar to stick to header when scrolling
Hi guys so i am trying to get an effect working were the navbar is in the middle of the page and the user will scroll down , as he hits the navbar it should stick to the top of the page. example of this : here
You can see when the user scrolls down and hits the navbar it stick and its a nice slow effect.
I got mine to work but it feels cluncky , by that i mean it flicks to the top straight away unlike the example one were its very smooth and it smoothly sticks to the top while mine is very harsh.
.parallax {
background-color: Black;
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax1 {
background-color: Red;
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
z-index: 1
}
.navbar-nav {
float: none;
margin: 0;
text-align: center
}
.navbar-nav>li {
float: none;
display: inline-block
}
.navbar-nav>li>a {
line-height: 38px
}
.navbar-nav>li>a.active {
background-color: #E7E7E7
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #333333;
background-color: #E7E7E7
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parallax"></div>
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="700">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#hometab">Home</a></li>
<li><a href="#section1">About Me</a></li>
<li><a href="#section2">My Skills</a></li>
<li><a href="#section3">Portfolio</a></li>
<li><a href="#section4">Contact Me</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>1>
<div class="parallax1"></div>
Any help would be great.
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Smooth sticky navbar it is using jquery 2. Hope this works for your testing. Keeps track of navbar on all screen size.
var navOffset, scrollPos = 0;
function sticky() {
if (!$(".navbar").hasClass("fixed")) {
navOffset = $(".navbar").offset().top;
}
}
sticky();
$(window).scroll(function() {
scrollPos = $(window).scrollTop();
if (scrollPos >= navOffset) {
var ht = $(".navbar").outerHeight() + 10;
$(".navbar").addClass("navbar-fixed-top");
$(".nav-placeholder").css({
'height': ht + "px",
'display': 'block'
});
} else {
$(".navbar").removeClass("navbar-fixed-top");
$(".nav-placeholder").css({
'height': 0,
'display': 'none'
});
}
});.parallax {
background-color: Black;
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax1 {
background-color: Red;
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar {
margin-bottom: 0px;
left: 0;
top: 0;
width: 100%;
list-style: none;
height: 70px;
z-index: 1
}
.navbar-nav {
float: none;
margin: 0;
text-align: center
}
.navbar-nav>li {
float: none;
display: inline-block
}
.navbar-nav>li>a {
line-height: 38px
}
.navbar-nav>li>a.active {
background-color: #E7E7E7
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #333333;
background-color: #E7E7E7
}
.navbar-toggle {
background-color: #000000;
background-image: none;
border-radius: 4px;
float: right;
margin-bottom: 8px;
margin-right: 15px;
margin-top: 18px;
padding: 9px 10px;
position: relative
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #2DCC70
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #000000
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: transparent
}
.nav-placeholder {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="parallax"></div>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#hometab">Home</a></li>
<li><a href="#section1">About Me</a></li>
<li><a href="#section2">My Skills</a></li>
<li><a href="#section3">Portfolio</a></li>
<li><a href="#section4">Contact Me</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<div class="nav-placeholder"></div>
<p>Some text for test</p>
<div class="parallax1"></div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download