纯 javascript 半自动式下滑肯定高度,导航栏牢固

转动条下滑肯定高度时,牢固指定 ID 的导航条。

运用方法:
1、修正 FixTop() 中 id 为须要牢固导航的响应 id ;
2、修正 FixTop() 中 offsettop 为须要牢固对象导航间隔顶部的间隔;

结果:

当转动条下滑转动凌驾导航栏位置时,导航栏牢固 (移除原有,增加「position:fixed」属性并增加 「fixtop」 类);

当转动条上滑高度低于本来导航高度时,导航栏变成默许结果(移除原有,增加「position:static」属性并增加 「fixnone」类)。

function FixTop(obj,offsettop){
  var obj = document.getElementById(obj);
  var objOffset = obj.offsetTop;
  // alert('牢固对象间隔顶部高度为' + objOffset);
  //去掉 alert 前面的双斜杠,然后在页面中革新并向下转动,页面就弹出 offsettop 的高度。
  var bodyScrollOffset = document.body.scrollTop;
  var Result = objOffset - bodyScrollOffset;
  sessionStorage.objoffset = objOffset;
  // console.log(Result);
  if (Result < 0) {
    if (bodyScrollOffset < offsettop) {
      obj.style.position = 'static';
      obj.setAttribute('class', 'fixnone');
    }else{
      obj.style.position = "fixed";
      obj.style.top = 0;
      obj.setAttribute('class', 'fixtop');
    }
  }else{
    obj.style.position = 'static';
    obj.setAttribute('class', 'fixnone');
  }
}
window.onscroll = function(){
  FixTop('id',offsettop);
}

结果示例:结果戳我。

当前做法已不发起,发起运用最新结果:新地址

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