Having a sticky navbar on my Bootstrap-based website, I've implemented the following jQuery code:
$(document).ready(function () {
var flag = false;
function stickNav() {
$(".navbar-default").affix({
offset: {
top: $('.header-img').height()
}
});
$(".navbar-default").css({ "width": $('.container').width(), "z-index": 1000 });
$(".navbar-wrapper").css("height", $('.navbar-default').height());
$(".header").css("height", $('.header-img').height());
flag = true;
}
$(".header img").ready(function () {
if (!flag)
window.setInterval(stickNav, 10);
});
$(window).resize(function () {
$(window).off('.affix');
$('.navbar-default').removeData('bs.affix').removeClass('affix affix-top affix-bottom');
stickNav();
});
Furthermore, here is the relevant CSS:
.affix {
top: 0;
width: 100%;
}
However, the issue arises as the navigation bar sticks to the top prematurely. You can see this live example at:
Does anyone have a solution for this problem?
Thank you.