当前位置: 首页 > news >正文

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

效果示例:效果戳我。

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

相关文章:

  • 记录下来,自己要用的东西
  • 实战json、html、jsx的互转
  • Copperhead OS —— Android 的安全增强版本!
  • 该离开了吧,程序员辞职的那些理由
  • 2017最新企业Shell面试题及企业运维实战共30+5道案例+变量符号
  • Dubbo -- 系统学习 笔记 -- 入门
  • 数据库案例集锦 - 开发者的《如来神掌》
  • ffmpeg在android上输出滑屏问题处理
  • 浅谈hibernate、ibatis、myibatis之间的区别?
  • U-Mail邮件系统何以誉为信息整合中转枢纽
  • 编译使用tensorflow c版本动态链接库
  • Curator的使用
  • 开创学习的四核时代-iTOP-4412开发板开源硬件平台
  • nj04---事件回调函数
  • Oracle锁表查询和解锁方法
  • [ 一起学React系列 -- 8 ] React中的文件上传
  • [数据结构]链表的实现在PHP中
  • canvas绘制圆角头像
  • go append函数以及写入
  • HTTP那些事
  • IOS评论框不贴底(ios12新bug)
  • Less 日常用法
  • Linux后台研发超实用命令总结
  • mockjs让前端开发独立于后端
  • session共享问题解决方案
  • swift基础之_对象 实例方法 对象方法。
  • 不发不行!Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 测试开发系类之接口自动化测试
  • 动态规划入门(以爬楼梯为例)
  • 每天一个设计模式之命令模式
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • 少走弯路,给Java 1~5 年程序员的建议
  • 腾讯视频格式如何转换成mp4 将下载的qlv文件转换成mp4的方法
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • 东超科技获得千万级Pre-A轮融资,投资方为中科创星 ...
  • 进程与线程(三)——进程/线程间通信
  • #if 1...#endif
  • (C语言)fgets与fputs函数详解
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (html5)在移动端input输入搜索项后 输入法下面为什么不想百度那样出现前往? 而我的出现的是换行...
  • (层次遍历)104. 二叉树的最大深度
  • (附源码)ssm失物招领系统 毕业设计 182317
  • (南京观海微电子)——I3C协议介绍
  • (正则)提取页面里的img标签
  • (转)Mysql的优化设置
  • ***利用Ms05002溢出找“肉鸡
  • .[backups@airmail.cc].faust勒索病毒的最新威胁:如何恢复您的数据?
  • .NET Micro Framework初体验
  • .NET/C# 将一个命令行参数字符串转换为命令行参数数组 args
  • /etc/shadow字段详解
  • ??eclipse的安装配置问题!??
  • @RequestBody详解:用于获取请求体中的Json格式参数
  • [ solr入门 ] - 利用solrJ进行检索
  • []C/C++读取串口接收到的数据程序
  • [2016.7 Day.4] T1 游戏 [正解:二分图 偏解:奇葩贪心+模拟?(不知如何称呼不过居然比std还快)]