转动条下滑肯定高度时,牢固指定 ID 的导航条。
使用方法:
1、修正 FixTop() 中 id 为须要牢固导航的响应 id ;
结果:
当转动条下滑转动凌驾导航栏位置时,导航栏牢固 (移除原有,增加「position:fixed」属性并增加 「fixtop」 类名);
当转动条上滑高度低于本来导航高度时,导航栏变成默许结果(移除原有,增加「position:static」属性并增加 「fixnone」类名)。
function FixTop(obj) {
var obj = document.getElementById(obj);
var objOffset = obj.offsetTop;
//console.log("对象高度"+ objOffset);
window.onscroll = function() {
var bodyScrollOffset = document.body.scrollTop;
//console.log('往下转动间隔高度'+ bodyScrollOffset);
var Result = objOffset - bodyScrollOffset;
//console.log("对象减去转动高度"+ Result);
if (Result < 0 && bodyScrollOffset > objOffset) {
obj.style.position = "fixed";
obj.style.top = 0;
obj.setAttribute('class', 'fixtop');
} else {
obj.style.position = 'static';
obj.setAttribute('class', 'fixnone');
}
}
}
FixTop('ID');//此处填入被牢固对象的ID
结果示例:结果戳我。