My webpage has a main header that sticks to the top of the window and a subnav fixed at the bottom. The hero image adjusts its height based on the window minus the header and subnav heights. When scrolling past the subnav, it sticks just below the main navigation. Everything functions well except for one bug.
To see how it currently works, visit this link: https://jsfiddle.net/owgvjxdj.
The issue arises when resizing the window; the subnav's position doesn't adjust accordingly and can end up too high or low. To fix this, I attempted to refactor the subnav's measurements by adding a window resize event:
// Update subnav position on window resize
$( window ).resize(function() {
var windowH = $(window).height();
var stickToBot = windowH - $('#subnav').outerHeight(true);
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot - $('.navbar').outerHeight(true) ) {
$('#subnav').css({'position':'fixed','top' :'80px'});
} else {
$('#subnav').css({'position':'absolute','top': stickToBot +'px'});
}
});
Although this solution works initially, after scrolling and resizing the window, the positioning becomes inaccurate. View the issue here: https://jsfiddle.net/owgvjxdj/1/
I sense I'm overlooking something evident here, but what could it be?!