纯 javascript 半自动式下滑一定高度，导航栏固定

raise_yang 发布于2019-08-20 17:06 / 2410人阅读

摘要：滚动条下滑一定高度时，固定指定的导航条。固定对象距离顶部高度为去掉前面的双斜杠，然后在页面中刷新并向下滚动，页面就弹出的高度。效果示例效果戳我。当前做法已经不建议，建议使用最新效果新地址

滚动条下滑一定高度时，固定指定 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);
}

效果示例：效果戳我。

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

GPU云服务器云服务器 html下滑式网页状态栏高度状态栏的高度导航栏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83403.html

JavaScript 下滑一定高度自动固定顶部之二（简单写法）

摘要：滚动条下滑一定高度时，固定指定的导航条。使用方法修改中为需要固定导航的相应效果当滚动条下滑滚动超过导航栏位置时，导航栏固定移除原有，添加属性并添加类名当滚动条上滑高度低于原来导航高度时，导航栏变成默认效果移除原有，添加属性并添加类名。滚动条下滑一定高度时，固定指定 ID 的导航条。使用方法：1、修改 FixTop() 中 id 为需要固定导航的相应 id ；效果：当滚动条下滑...

levinit 2019-08-20 18:08 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

高胜山 2019-08-26 13:44 评论0 收藏0
前端插件库

摘要：原文链接前端插件库站点前端开发文档博客前端插件库前端插件库官网是的函数库，目的是强化表格操作如搜索排序，并自动加入组件引入表格中，使用非常灵活简便。由推出，灵活扎实的建议列表函数库。原文链接：前端插件库站点：前端开发文档博客：前端插件库前端插件库 DataTables 官网：https://www.datatables.net/ DataTables是jQuery的JavaScr...

shusen 2019-08-30 10:53 评论0 收藏0
移动端H5页面注意事项

摘要：移动端活动页面常常需要能够分享到各种社交中，常用的有微信等。微信二维码问题同一个页面里要是有两个二维码，长按扫描总是只能扫出左侧第一个二维码。首发于简书博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶...

weknow619 2019-08-01 18:04 评论0 收藏0
移动端H5页面注意事项

摘要：移动端活动页面常常需要能够分享到各种社交中，常用的有微信等。微信二维码问题同一个页面里要是有两个二维码，长按扫描总是只能扫出左侧第一个二维码。首发于简书博客：http://www.jianshu.com/p/e958... 2017-11-25 更新：5. 使用 Gulp 拼合图片 1. 单个页面内容不能过多设计常用尺寸：750 x 1334 / 640 x 1134，包含了手机顶...

madthumb 2019-08-29 13:53 评论0 收藏0