滚动条下滑必定高度时,固定指定 ID 的导航条。javascript
使用方法:
一、修改 FixTop() 中 id 为须要固定导航的相应 id ;html
效果:java
当滚动条下滑滚动超过导航栏位置时,导航栏固定 (移除原有,添加「position:fixed」属性并添加 「fixtop」 类名);code
当滚动条上滑高度低于原来导航高度时,导航栏变成默认效果(移除原有,添加「position:static」属性并添加 「fixnone」类名)。htm
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
效果示例:效果戳我。对象