Question

我正在使用一个名为SMINT的JQuery插件来创建粘性导航，在滚动时固定到视口的顶部。我试图在页面顶部导航前后留出一个空格，下面有多个全高div。

使用

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

使div成为全高（减去粘性导航），但会破坏初始导航。（滚动导航后很好）。卸下边框盒螺钉，使其达到全高。

我的尝试：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();
});

全高度div的粘性导航

1 个答案: