我正在使用一个名为 SMINT 的 JQuery 插件来创建粘性导航,该导航在滚动时固定在视口(viewport)的顶部。我试图在页面顶部的导航前后留一个空格,并在下面留出多个全高 div。
使用
* {margin: 0; padding: 0; outline: 0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
使 div 全高(减去粘性导航)但破坏了初始导航。 (滚动导航后就可以了)。移除边框会破坏整个高度。
最佳答案
您不需要任何插件 - 这里有一个快速且易于理解/自定义的插件 方法:
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();
});
关于javascript - 全高 div 的粘性导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29971326/