Is there a way to make a navigation bar stay fixed at the top of the page without it jumping when it transitions positions? I've tried using a placeholder but it doesn't seem to work. Any suggestions on how to solve this issue?
#navbar {
width: 900px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: #893C06, 0.8;
margin-top: 5px;
margin-left: 30px;
float: left; }
#holder {
width: 900px;
height: 50px;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 5px;
margin-left: 30px;
float: left;
display: none; }
.placeholder {
display: block; }
$(document).ready(function () {
var top = $('#navbar').offset().top - parseFloat($('#navbar').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#navbar').addClass('fixed');
$('#holder').addClass('placeholder');
} else {
$('#navbar').removeClass('fixed');
$('#holder').addClass('placeholder');
}
});
});