利用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>


目录
相关文章
|
7月前
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置
|
1月前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
5月前
|
JavaScript 前端开发
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
vue 页面下滚到目标元素的位置,目标元素自动吸顶(自动悬浮吸附到页面顶部)
381 0
|
前端开发 JavaScript 容器
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
JavaScrpit如何实现弹出遮罩层后将页面固定到当前位置且无法继续滚动
76 0
layui列表页滚动时弹出窗无法居中的解决方案
layui列表页滚动时弹出窗无法居中的解决方案
128 0
|
小程序 JavaScript
小程序顶部导航栏,可滑动,可动态选中放大
小程序顶部导航栏,可滑动,可动态选中放大
204 0
|
JavaScript 前端开发 开发者
分类页 -iscroll 区域滚动|学习笔记
快速学习 分类页 -iscroll 区域滚动
102 0
|
前端开发
css导航栏固定在页面顶端
css导航栏固定在页面顶端
1172 0
jq移动端点击导航滚动对应位置并跟随联动效果
jq移动端点击导航滚动对应位置并跟随联动效果
502 0
jq移动端点击导航滚动对应位置并跟随联动效果
|
前端开发
HTMLCSS实现左侧固定宽度右侧内容可滚动
在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo。 处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比,然后设置它的overflow为auto或者scroll。
3298 1