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

levinit 发布于2019-08-20 18:08 / 3367人阅读

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

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

效果示例：效果戳我。

混合云服务器托管 html设置顶部高度固定页面顶部 js中距离顶部的高度 js导航固定在顶部

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

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

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

摘要：滚动条下滑一定高度时，固定指定的导航条。固定对象距离顶部高度为去掉前面的双斜杠，然后在页面中刷新并向下滚动，页面就弹出的高度。效果示例效果戳我。当前做法已经不建议，建议使用最新效果新地址滚动条下滑一定高度时，固定指定 ID 的导航条。使用方法：1、修改 FixTop() 中 id 为需要固定导航的相应 id ；2、修改 FixTop() 中 offsettop 为需要固定对象导航距...

raise_yang 2019-08-20 17:06 评论0 收藏0
vue结合preventDefault()和页面滚动高度计算，解决ios橡皮筋效果

摘要：第一种方法我尝试了，觉得不是很好用，而且页面的滑动变得卡顿，橡皮筋效果还是时而出现，因此考虑第二种办法。由上面的定义可知，当页面滑动到顶部时，为，当页面出现橡皮筋时，小于当页面滑动到底部时，。感谢的启发，方法很有用！好几个月以前，我写了一个类似于自动回复那种的客服页面，嵌入到公司开发的app里。上周测试突然找到我，说页面在滑动的时候，输入框也会跟着上下滑动，而这个...

JerryWangSAP 2019-08-23 14:09 评论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
Material Design组件之AppBarLayout

摘要：原文首发于微信公众号，欢迎关注交流是一个垂直方向的，它实现了许多符合设计规范的状态栏应该具有的功能，比如滚动手势。原文首发于微信公众号：jzman-blog，欢迎关注交流！ AppBarLayout 是一个垂直方向的 LinearLayout，它实现了许多符合 Material Design 设计规范的状态栏应该具有的功能，比如滚动手势。 AppBarLayout 一般直接用作 Co...

Shihira 2019-06-25 12:48 评论0 收藏0