小程序滑动菜单栏吸顶

最新推荐文章于 2025-07-08 11:27:21 发布
原创 最新推荐文章于 2025-07-08 11:27:21 发布 · 2.7w 阅读 · 35 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#吸顶 #菜单栏固定 #菜单栏吸顶 #小程序

本文介绍小程序中实现菜单栏吸顶效果的方法，包括常见方案与position: sticky的使用。常见方案通过监听滚动并计算菜单位置，但存在性能问题。新选择position: sticky在部分安卓设备上不兼容，目前线上仍采用传统方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 效果图

菜单正常嵌入在页面中

菜单位置滑动到距离可视窗口0px时，脱离文档流固定在页面顶部

2.常见实现方案
  1. 查询菜单栏距离文档顶部的距离menuTop
  2. 监听页面滚动距离scrollTop
  3. 当页面滚动距离scrollTop > menuTop菜单栏距离文档顶部的距离时，菜单栏固定定位
<view class="menu {
    
    {menuFixed ? 'fixed': ''}}" id="affix">菜单栏</view>

                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
讨论在小程序中实现仿支付宝的吸顶效果

				
			

			

				

					qq_41064446的博客
				

				

					01-22
					
					1426
					
				

			

		

		

			
				









支付宝实现效果如上图。
在小程序中核心方法是
（1） 设置元素id=“rmjt”，获取元素高度
	  var query = wx.createSelectorQuery();
      query.select('#rmtj').boundingClientRect();
      query.exec(function (res) {
          _this.se...

			
		

	



                

            
              



	

		

			

				
					
微信小程序导航栏或菜单栏吸顶效果简单实现

				
			

			

				

					风车先生的博客
				

				

					02-20
					
					6541
					
				

			

		

		

			
				
微信小程序导航栏或菜单栏吸顶效果简单实现
思路：
1、获取导航栏初始位置距顶部的距离s1（通过获取页面标签方法）
2、监听页面的滑动，获取滑动距离s2（使用onPageScroll）
3、当s2&gt;=s1时，给导航栏增加固定的样式（position:fixed）
代码：
1、导航栏


2、固定到顶部的样式
.fixed {
  position: fixed;
  top: 0;
  z-i...

			
		

	



              


  
              

                


	

		

			

				
					
小程序标签滑动吸顶

				
			

			

				

					swx999的博客
				

				

					03-29
					
					201
					
				

			

		

		

			
				
1、HTML
<view class="title {{isFixedTop?'title-fixed':''}}" id="navbar">
          <view class="title-txt">
            <view>第一</view>
            <view>第二</view>
          </view>
</view>
<view class="tit

			
		

	





	

		

			

				
					
微信小程序开发必备：页面滑动与滚动视图组件全解析

					
最新发布

				
			

			

				

					2201_75786273的博客
				

				

					07-08
					
					1111
					
				

			

		

		

			
				
在微信小程序开发中，页面滑动交互是提升用户体验的重要环节。无论是监听滚动距离实现导航栏动态效果，还是使用滚动视图组件展示列表数据，掌握这些操作都能让你的小程序更具专业性。本文将详细讲解页面滚动事件监听、滚动位置控制及 scroll-view 组件的实战用法。

			
		

	



		

			
		



	

		

			

				
					
小程序菜单吸顶

				
			

			

				

					sinat_36193631的博客
				

				

					09-11
					
					6803
					
				

			

		

		

			
				

  昨天在写一个小程序时，做了一个带吸顶的效果，亲测有效。看到网上很多都不能兼容安卓机，这个可以，随便滑，无论快慢。github地址：https://github.com/yangdongMC/caas.git（如果有用，欢迎给个star ）


.


  介绍一下我的机型： 
  名称：华为荣耀8 
  内核：4.1.18-ga5ff2c9 android@localhost #1 
  A...

			
		

	





	

		

			

				
					
微信小程序开发记录（二）菜单栏或者某个元素吸顶功能实现

				
			

			

				

					wh_xmy的博客
				

				

					09-21
					
					2226
					
				

			

		

		

			
				
直接上代码：

wxml：


&lt;view class=" {{menuFixed ? 'fixed': ''}}" id="fix"&gt;某元素&lt;/view&gt;


wxss:


.fixed{
    position: fixed;
    top: 0;
    left:0;
    right:0; 
}


js:


data:{
        menuTop...

			
		

	





	

		

			

				
					
微信小程序 - 列表滚动头部吸顶

				
			

			

				

					iotjin的专栏
				

				

					06-15
					
					1617
					
				

			

		

		

			
				
demo 地址: https://github.com/iotjin/Jh_weapp

效果图：

吸顶主要是   position: sticky;
.header {
  background: rgb(230, 230, 230);
  height: 25px;
  line-height: 25px;
  padding-left: 30rpx;
  font-size: 13px;
  align-items: center;
  position: sticky;
  top: 0;
}
.

			
		

	





	

		

			

				
					
关于小程序菜单栏吸顶效果

				
			

			

				

					helloFE的博客
				

				

					08-14
					
					7347
					
				

			

		

		

			
				
    最近工作遇到关于小程序菜单栏吸顶的需求（例如某页面中间有个tabbar，要求当用户滑动该页面使tabbar到达屏幕顶部时，tabbar吸顶，页面滑动回来使tabbar回到原来的位置）

    查了小程序的文档，没找到相关的功能介绍，但是找到了页面滚动监听事件  onPageScroll (e) { }

    我们捋一下思路，要实现吸顶，只要获取到页面已经滚动的高度A，以及tabbar...

			
		

	





	

		

			

				
					
微信小程序滑动切换导航，导航栏跟随顶部tab导航滚动

				
			

			

				

					厦门在乎科技
				

				

					09-06
					
					5890
					
				

			

		

		

			
				
前言

很多App都有这种设计，例如淘宝、爱奇艺、今日头条、知乎等都有用到，大部分的App都会用到这种设计，非常主流。

tab导航栏使用<scroll-view>标签，内容使用<swiper>，不多说，直接上代码，为了更真实展示实例的使用，我直接就配置了服务器来取数据进行渲染。

index.wxml


<view class="container">
    <!-- tab导航栏 -->
    <!-- scroll-left属性可以控制滚动条

			
		

	





	

		

			

				
					
小程序 WXS响应事件（滚动菜单栏tab吸顶）

				
			

			

				

					qq_41913971的博客
				

				

					01-08
					
					1868
					
				

			

		

		

			
				
小程序 WXS响应事件（滚动菜单栏tab吸顶）
解决问题：
网上很多在页面滚动事件中处理的方式都会有在安卓端性能非常差，吸顶效果反应迟钝，不流畅等问题。
注意的问题：
页面使用scroll-view滚动代替页面滚动之后，上拉下拉加载之类的都要用scroll-view的事件来处理https://developers.weixin.qq.com/miniprogram/dev/component/sc...

			
		

	





	

		

			

				
					
微信小程序中列表滚动到顶部表头吸顶效果

				
			

			

				

					guairena的博客
				

				

					04-18
					
					1033
					
				

			

		

		

			
				
效果

具体实现


// 通过样式实现顶部吸顶效果
// 核心样式
.stickyClass{
  position: sticky ;
  top: 70rpx;	 // 距离顶部还有多少时候产生吸顶效果
  z-index: 9999;
}

<view class="tableList">
   <view class="listHead stickyClass">
      <view>排名</view>
      <view>日期.

			
		

	





	

		

			

				
					
微信小程序---导航吸顶+锚点.rar

				
			

			

				

					04-11
				

			

		

		

			
				
我们在做小程序的时候，难免会遇到页面里面有很长的数据，页面下面又有到导航栏部分；用户希望页面滑动到导航栏的位置，导航栏固定在页面的最上面，同时里面的数变化，也能改变导航栏的高亮

			
		

	





	

		

			

				
					
Android-滑动listview标题置顶listview吸顶效果

				
			

			

				

					08-12
				

			

		

		

			
				
滑动listview标题置顶,listview吸顶效果，安卓系统状态栏透明,有图有源码

			
		

	





	

		

			

				
					
Android 实现当下最流行的吸顶效果

				
			

			

				

					01-04
				

			

		

		

			
				
开始逐渐领略到ItemDecoration的美~
今天让我 使用 ItemDecoration 来完成 可推动的悬浮导航栏的效果，最终实现的效果如下图：

具体实现步骤如下：
根据我前面的文章所讲的RecyclerView的基本使用，我们先来完成基本的recyclerView：
第一步：布局里写一个RecyclerView
第二步：实例化
recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
第三步：获取所需的数据 (这里我们来个真实点的情景，去联网请求数据)

/**
 * 联网请求所需的url
 */
 public 

			
		

	





	

		

			

				
					
微信小程序实现吸顶特效

				
			

			

				

					10-15
				

			

		

		

			
				
主要为大家详细介绍了微信小程序实现吸顶特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
微信小程序实现吸顶效果

				
			

			

				

					qq_36437172的博客
				

				

					04-19
					
					1246
					
				

			

		

		

			
				
吸顶效果思路：

1.首先获取 Tab 栏与顶部的距离；

2.监听页面滚动事件onPageScroll，判断 Tab 栏是否滚动到顶部；

3.当 Tab 栏滚动到顶部时，添加吸顶样式，实现效果。


Page({
  data: {
    navbarInitTop: 0, //导航栏初始化距顶部的距离
    isFixedTop: false, //是否固定顶部
  },

  /**...

			
		

	





	

		

			

				
					
支付宝小程序滚动监听吸顶效果

				
			

			

				

					weixin_33739627的博客
				

				

					12-26
					
					1345
					
				

			

		

		

			
				
axml部分

<view class=" {{menuFixed ? 'fixed': ''}}" id="affix">菜单栏</view>

axss部分

.fixed{position: fixed; top: 0; }

js部分

Page({
  data: {
    menuFixed:"",
  },
  // 监听页面滚动...

			
		

	





	

		

			

				
					
 小程序吸顶效果

				
			

			

				

					weixin_34343689的博客
				

				

					04-15
					
					383
					
				

			

		

		

			
				
需求：页面滑动，滑到中间处有个组件需要固定在顶部，没滑动时又恢复原位
先弄一个wxml文件，滑动到目标处就固定在顶部
<view class="news static-news"><text>今日新闻列表</text></view>
<view class="news fix-news...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 5

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值