Sticky navigation with full height divs

Question

Я использую плагин JQuery под названием SMINT, чтобы создать липкую навигацию, которая будет прикрепляться к верхней части окна просмотра при прокрутке. Я пытаюсь оставить пространство до и после навигации в верхней части страницы и нескольких полных верхних divs ниже.

Использование

* {margin: 0; padding: 0; outline: 0; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
} 

делает дивы полный рост (минус липкий СЧА), но проваливает первоначальную навигацию. (после прокрутки навигации в порядке). Извлечение бордюра привинчивает вверх по высоте.

Моя попытка: https://jsfiddle.net/colintkelly/uxsg6mL8/

Живой пример: http://www.banditfish.com/black-fives/

Answer 1

Вам не нужно каких-либо плагин для этого - вот это быстро и легко понять/настроить подход:

JSnippet demo - using your 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(); 
});