Attached nav with full height divs
I am using a jQuery plugin called SMINT to create a sticky navigation that attaches to the top of the viewport when scrolling. I'm trying to leave a space before and after navigation at the top of the page and multiple full height divisions below.
Using
* {margin: 0; padding: 0; outline: 0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
makes the divs full height (minus the sticky nav) but breaks the initial navigation. (after scrolling navigation is ok). Removing the frame gives the height the height.
My attempt: https://jsfiddle.net/colintkelly/uxsg6mL8/
Live example: http://www.banditfish.com/black-fives/
+3
source to share
1 answer
You don't need a plugin for this - here's a quick and easy to understand / configure Approach:
JSnippet demo - using HTML without Smint
var barSelector = ".subMenu",
offSetToTriggerFixed = 1,
offsettofix = $(barSelector).offset().top + offSetToTriggerFixed,
$fixedBar = $(barSelector).eq(0).clone();
//Set cloned style and append to body:
$fixedBar.css({ display:'none', position: 'fixed', top:0, 'z-index':1100});
$('body').append($fixedBar);
//Set heights:
var viewPortHeight = $('body').height(),
navHeight = $(barSelector).outerHeight(),
$anyOtherSec = $('.section').not('.sTop');
$anyOtherSec.css({ height: viewPortHeight - navHeight + 5});
//Trigger when needed:
$(window).scroll(function(){
var fromTop = $(this).scrollTop();
if (fromTop <= offsettofix) $($fixedBar).hide();
else $($fixedBar).show();
});
+1
source to share