JavaScript 下滑肯定高度自动牢固顶部之二(简朴写法)

转动条下滑肯定高度时,牢固指定 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

结果示例:结果戳我。

    原文作者:大朗
    原文地址: https://segmentfault.com/a/1190000010255608
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞