JavaScript 下滑一定高度自动固定顶部

当前位置: 首页 » 记录 » javascript » JavaScript 下滑一定高度自动固定顶部

分类: javascript 1,052阅读阅读模式

滚动条下滑一定高度时,固定指定 ID 的导航条。

使用方法:

修改 FixTop() 中 id 为需要固定导航的相应 id ;

效果:

当滚动条下滑滚动超过导航栏位置时,导航栏固定 (移除原有,添加「position:fixed」属性并添加 「fixtop」 类名);

当滚动条上滑高度低于原来导航高度时,导航栏变成默认效果(移除原有,添加「position:static」属性并添加 「fixnone」类名);

代码如下:

  1. function FixTop(obj) {
  2. var obj = document.getElementById(obj);
  3. var objOffset = obj.offsetTop;
  4. //console.log("对象高度"+ objOffset);
  5. window.onscroll = function() {
  6. var bodyScrollOffset = document.body.scrollTop;
  7. //console.log('往下滚动距离高度'+ bodyScrollOffset);
  8. var Result = objOffset - bodyScrollOffset;
  9. //console.log("对象减去滚动高度"+ Result);
  10. if (Result < 0 && bodyScrollOffset > objOffset) {
  11. obj.style.position = "fixed";
  12. obj.style.top = 0;
  13. obj.setAttribute('class', 'fixtop');
  14. } else {
  15. obj.style.position = 'static';
  16. obj.setAttribute('class', 'fixnone');
  17. }
  18. }
  19. }
  20. FixTop('ID');//此处填入被固定对象的ID

 

 

 

代码示例:效果戳我

 

完毕!

 

相关文章