前端吸顶功能，滚动到一定位置时固定到顶部

最新推荐文章于 2023-05-19 10:26:16 发布
最新推荐文章于 2023-05-19 10:26:16 发布
阅读量2k 收藏 5
点赞数 1
文章标签： 前端 javascript python ViewUI
原文链接：https://my.oschina.net/lemonfive/blog/1828160
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

适用环境：菜单滑动后固定，搜索框的固定

（只做全了功能，没有写完美样式，明白原理，样式可自行调整，为了区分效果，颜色反差比较明显）先看图：

9117ef958c6361191e34b5a6b3bf9e1b7af.jpg5125a3ce6a4dd9b3a8e9829ff01b25840f3.jpg

下面贴上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>吸顶容器</title>
  <style>
    .body {
      margin: 0px !important;
      padding: 0;
      box-sizing: border-box;
    }

    .road-tab-fixed {
      position: fixed;
      top: 0%;
      width: 100%;
    }

    .top {
      background: #c4f8b4;
      height: 50px;
    }

    .list {
      background: #ccc;
      width: 100%;
    }

    .list li {
      height: 50px;
      border-bottom: 2px solid #f00;
    }

    .banner {
      width: 100%;
      background: #c19aff;
      height: 150px;
    }
  </style>
</head>

<body>
  <div class="cont">
    <div class="banner">这是广告图</div>
    <div class="top" id="road-tab">菜单</div>
    <div class="list">
      <ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <script>
    const fixedDom = $("#road-tab"),
      tabclass = "road-tab-fixed";
    let beforeElementScrollTop = 0;
    let beforeOffsetTop = fixedDom[0].offsetTop;
    //scroll节流
    const throttle = (func, wait, mustRun) => {
      var timeout,
        startTime = new Date();

      return function () {
        var context = this,
          args = arguments,
          curTime = new Date()
        clearTimeout(timeout)
        // 如果达到了规定的触发时间间隔，触发 handler
        if (curTime - startTime >= mustRun) {
          beforeElementScrollTop = document.documentElement.scrollTop
          console.log("beforelementScrollTop----------", document.body.scrollTop);
          func.apply(context, args);
          startTime = curTime
          // 没达到触发间隔，重新设定定时器
        } else {
          timeout = setTimeout(func, wait)
        }
      }
    }
    const winScroll = (e) => {
      const elementScrollTop = document.documentElement.scrollTop
      console.log('elementScrollTop--------------', elementScrollTop);
      if (beforeElementScrollTop - elementScrollTop <= 0) {//up
        console.log('up');
        if (beforeOffsetTop - elementScrollTop < 0) {
          fixedDom.addClass("road-tab-fixed")
        }
      } else {
        if (beforeOffsetTop - elementScrollTop >= 0) {
          console.log("UUUUUU");
          fixedDom.removeClass("road-tab-fixed")
        }
      }
    };
    $(window).off("scroll").on("scroll", throttle(winScroll, 10, 100));
  </script>
</body>
</html>

主要运用到了scrollTop和offsetTop。

vue的写法

<template>  
  <div class="main">  
      <div class="header">  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
        <div>头部展示内容-------------</div>  
      </div>  
      <div class="auto_fixed" :class="auto_fixed">自动粘滞固定头部，需要一直展示的</div>  
      <div class="auto_fixed_fake" :style="{display: auto_fixed.fixed ? 'block':'none'}"></div>  
      <div class="content">  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
        <div>  
          tabs内部内容，最帅程序员专享受------我的最爱--李易峰  
        </div>  
  
      </div>  
  </div>  
</template>  
  
<script>  
export default {  
  
  name: 'HelloWorld',  
  data () {  
    return {  
      msg: 'Welcome to Your Vue.js App',  
      auto_fixed: {  
        fixed: false  
      }  
    }  
  },  
  methods: {  
    onScroll(){  
      let scrolled = document.documentElement.scrollTop || document.body.scrollTop  
      let header_height = null  
      if(document.getElementsByClassName('header')[0]){  
        header_height = document.getElementsByClassName('header')[0].offsetHeight  
      }  
      console.log('滚动的距离:'+scrolled,'头部的高度:'+ header_height)  
      this.auto_fixed = {  
        auto_fixed: true,  
        fixed: scrolled >= header_height  
      }  
    }  
  },  
  mounted(){  
    this.$nextTick(function () {  
      window.addEventListener('scroll', this.onScroll)  
    })  
  }  
  
}  
</script>  
  
<!-- Add "scoped" attribute to limit CSS to this component only -->  
<style scoped>  
  .main{  
  
  }  
  .header{  
    padding: 8px 10px;  
  }  
  .auto_fixed{  
    height: 3em;  
    background: orange;  
    line-height: 3em;  
    text-align: center;  
  }  
  .fixed{  
    position: fixed;  
    top: 0px;  
    width: 100%;  
  }  
  .content{  
    color: gray;  
    padding: 8px;  
  }  
  
</style>

第三种方式

beforeDestroy() { //在组件生命周期结束的时候销毁。
  window.removeEventListener('scroll', this.scrollhandle);
  document.documentElement.scrollTop = 0
},
methods: {
  listenerAction() {
    window.addEventListener('scroll', this.scrollhandle);
    document.documentElement.scrollTop = 0
  },
  scrollhandle(event) {
    let scrolled = document.documentElement.scrollTop || document.body.scrollTop
    let header_height = null
    if (document.getElementsByClassName('header')[0]) {
      header_height = document.getElementsByClassName('header')[0].offsetHeight
    }
    console.log('滚动的距离:' + scrolled, '头部的高度:' + header_height)
    this.auto_fixed = {
      auto_fixed: true,
      fixed: scrolled >= header_height
    }
  }
},
mounted() {
  // 保证在DOM渲染完毕后初始化, 20秒是经验值
  setTimeout(() => {
    this.listenerAction()
  }, 20);
},

 

转载于:https://my.oschina.net/lemonfive/blog/1828160

weixin_34167043
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
导航滚动一定高度吸顶，锚点定位
12-05
网络上发现的案例。觉得不错就复制下来了。以便于自己改造！
vue实现吸顶、锚点和滚动高亮按钮效果
10-16
吸顶效果是指当页面滚动到某一位置时，某个元素会固定在屏幕顶部。Vue 中实现吸顶效果有多种方法，其中一种是利用 CSS 的 `position: sticky` 属性。`position: sticky` 结合了 `position: relative` 和 `position:...
H5吸顶功能--划到某一元素处将其固定在顶部
菜菜的博客
06-16 1884
在网页里经常遇到这样的情况，滑动页面至某一个元素处，元素一直固定在顶部或底部，当页面滑到元素原有位置上方时，元素恢复原有位置。例如京东秒杀的活动时间，还有常见的搜索输入框固定在顶部。 利用js写了个搜索输入框固定在上方的例子，效果示例如下： 主要用到了offsetTop与scrollTop。 offsetTop:元素到其上级层顶部的距离. scrollTop:网页被卷去...
前端开发：页脚固定顶部的方法
chouchilei5210的博客
06-19 194
1 将html、body的高度设为100%，这样是为了使用body的子元素height：100%；生效（在我的另一篇博文有详细说明）： html,body{ height: 100%; margin: 0; padding: 0; } 2 基本布局： <body&...
前端移动端滑动吸顶效果实现
yuanwen52的博客
10-25 1284
1、使用Vant UI中的组件实现 Vant - Mobile UI Components built on Vue 2、自定义组件实现： 定义stickySlot.vue <template> <div class="sticky" :style="getPosition"> <div class="sticky-warp"> <slot></slot> </div> </di.
滚动到对应的高度与导航栏吸顶
carior的博客
12-07 368
//滚动对应的高度   $(".scroll-menu ul li").click(function(){     var index = $(this).index();      menuH = $(".scroll-menu").height();     var scrollToplist=$(".clum").eq(index).offset().top-menuH+"px";
CSS项目技巧:固定元素在顶部以及position解读
上千主上-贝库塔
05-21 4万+
css position
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
10-15
当滚动距离超过特定值（这里是`329`像素）时，`whether`设置为`true`，使得tab列表固定在顶部；否则，将其设回`false`。为了使这个滚动监听生效，我们需要在`mounted`生命周期钩子中添加滚动事件监听器。 关于...
仿美团购物车点击吸顶，滚动吸顶
10-10
同时，为了确保吸顶效果仅在用户需要时出现，需要监听用户的滚动事件，通过判断滚动位置来决定是否显示吸顶效果。 接下来是“滚动吸顶匹配”。当用户滚动页面时，如果当前展示的商品与某个分类相符，该分类应该自动...
滑动组件悬浮固定在顶部
11-10
当用户滚动页面或应用内容时，系统会检测到组件的位置是否达到预设的触发条件（如接近或到达顶部）。一旦满足条件，该组件就会被固定在屏幕顶部，即使用户继续向下滚动，组件也会始终保持可见。当用户向上滚动时，...
Element Dialog弹框回到顶部
weixin_57570884的博客
03-03 1227
Element Dialog弹框回到顶部
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法
juxiaozheng的博客
05-11 2万+
一、使用css直接用固定定位position: fixed。 适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。 示例代码： <style> *{ margin: 0; padding: 0; } p{ height: 500px; } section{ padding-top: 40px; } div{ height: 40px; width: 100%; color: white; background-color: crims
滑动页面到指定位置，固定元素在顶部
qq_37273844的博客
07-28 2878
当页面滑动到某一个位置时，需要固定导航栏或者某个元素在顶部位置，向上滑动又会回归原位 onPageScroll: function (e) { let that = this; that.setData({ scrollTop:e.scrollTop }) } 然后再模块上加 class="{{scrollTop>移动距离? ‘大于的样式’ : ‘小于的样式’}}" ...
vue 移动端吸顶效果，开始随页面滚动，滚动到指定位置固定在顶部或者固定在指定位置
好巧的博客
12-05 1万+
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。不同组件多次使用的话，建议在 src 下新建一个 common 文件夹，创建 stickySlot.vue 文件，方便多次复用。为了方便演示，这里使用了for循环的方法将屏幕撑满，直接将全部代码复制运行就能看到效果。通过设置top的值，控制需要固定在什么位置，0是顶部，值为number(px)// 需改为对应的组件存放的路径。// 使用假数据撑满屏幕。
CSS 吸顶效果 滚动头部固定，小技巧
宁夏前端工程师，马卫斌，wx：1457508895
06-30 5754
在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。只有滚动以后才出现阴影。一般情况下，使用 JS 监听滚动事件动态添加类名就可以实现，不过经过我的一番尝试，发现这种效果仅仅使用 CSS 也能轻易实现。 css 实现原理 实现这个效果，需要一点点“CSS 障眼法”。假设有一层阴影，在默认情况下用一个元素遮挡起来，以下都称之为“遮挡物”。 根据以上原理，这里需要添加一个元素，阴影和遮挡物都可以用伪元素生成css 代码 以上......
【CSS】使用 sticky 实现头部固定，主体内容滚动，但是头部不动的效果
y_coder的博客
05-19 5663
时，元素会在正常文档流中占据其原本的位置，但当页面滚动时，元素会变为固定定位（fixed），直到它达到了指定的滚动位置，然后又会回到正常文档流中。可以使用CSS中的position属性和z-index属性来实现页面头部固定，下面随着内容的增多滚动，但是头部不动的效果。这使得position: sticky;非常适合于创建在页面滚动过程中保持在特定位置的导航栏、表头、侧边栏等元素。当元素的position设置为。这样头部就会固定在页面顶部了。
滚动页面，实现导航栏固定在顶部（吸顶效果）
热门推荐
Kris的博客
01-02 4万+
首先最简单的，是利用position的sticky属性 说明 sticky 结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。 它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：0)；position:sticky这时的效果相当于fixed定位，固定在(top: 0...
前端实现顶部菜单栏固定javascript+vue
CPUyi的博客
09-13 1930
前端实现顶部菜单栏固定javascript+vue
vue 监听页面滚动 实现元素吸顶或者固定位置
最新发布
09-07
在Vue中实现元素吸顶或固定位置的方式是通过监听页面滚动事件并动态改变元素的样式或位置。具体步骤如下： 1. 在Vue的组件中，通过`mounted`钩子函数监听页面滚动事件： ``` mounted() { window.addEventListener...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值