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>
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>