利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果

简介: 利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果

利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果



利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果,代码如下


<script>
    var sub_classify = document.getElementsByClassName('sub_classify')[0];
    window.onscroll = function(){
       var mTop = sub_classify.offsetTop;
        //减去滚动条的高度
          var sTop = document.body.scrollTop;
          console.log('stop-->',sTop);
//        console.log('mtop-->',mTop);
        var result = mTop - sTop; 
         if(result<=50){
          sub_classify.style.position = "fixed";
          sub_classify.style.top = "50px"
        }
        if(sTop<365){
          sub_classify.removeAttribute("style");
        }
    }
  </script>


目录
相关文章
|
4月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
8月前
|
JavaScript
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
vue点击瞄点平滑滚动 | 锚点随页面滚动高亮显示 | 点击平滑滚动到页面顶部
207 1
|
8月前
|
JavaScript
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
vue 页面向下滚动到指定位置时,顶部显示悬浮搜索框
174 1
|
8月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
437 0
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
99 0
|
JavaScript 前端开发
jQuery 页面顶部滚动中固定导航栏
jQuery 页面顶部滚动中固定导航栏
73 0
layui列表页滚动时弹出窗无法居中的解决方案
layui列表页滚动时弹出窗无法居中的解决方案
164 0
|
小程序 JavaScript
小程序顶部导航栏,可滑动,可动态选中放大
小程序顶部导航栏,可滑动,可动态选中放大
220 0
|
容器
使用导航菜单如何实现在多个页面下左边导航菜单右边内容的效果
使用导航菜单如何实现在多个页面下左边导航菜单右边内容的效果
222 0
|
JavaScript 前端开发
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局