具有全高divs的粘性導航

我使用名爲SMINT的JQuery插件來創建在滾動時固定到視口頂部的粘性導航。我試圖在頁面頂部的導航之前和之後以及下面的多個完整高度div中留出空間。具有全高divs的粘性導航

使用

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

使div的全高（減粘NAV），但搞砸了最初的導航。（滾動導航後很好）。拆下邊框將全高度擰緊。

我嘗試：https://jsfiddle.net/colintkelly/uxsg6mL8/

活生生的例子：http://www.banditfish.com/black-fives/

來源

2015-04-30 Colin Kelly

你不需要任何插件在於 - 這裏是一個快速且易於理解/自定義方法：

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(); 
});

來源

2015-04-30 15:22:40

OP需要使用該特定插件，這使當前問題符合條件。否則它是重複的。 –

謝謝。但我需要.section divs是100％高度減去導航的高度。除非，我錯過了一些東西，在這個例子中我沒有看到。 –

@Razvan Dumitru不使用插件 - 也是一個答案，OPs尤其是新人可能會認爲它是最好的方式或首選的方式來實現的東西，而它更容易使用自己的代碼。 –

具有全高divs的粘性導航

回答

相關問題