纯 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);
}

效果示例:效果戳我。

当前做法已经不建议,建议使用最新效果:新地址

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值