小程序标签滑动吸顶

妖狐艹你老母 2022-11-14 12:00 195阅读 0赞

1、HTML

<view class="title { {isFixedTop?'title-fixed':''}}" id="navbar">
              <view class="title-txt">
                <view>第一</view>
                <view>第二</view>
              </view>
    </view>
    <view class="title" wx:if="{ {isFixedTop}}"></view>

2、css

.title{ 
      width: 100%;
      display: flex;
      justify-content: space-around;
      box-sizing: border-box;
      padding: 28rpx 0 28rpx 0;
      background-color: #f4f4f4;
    }
    /* 吸顶 */
    .title-fixed{ 
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 10;
      background-color: #ffffff;
    }

3、js

Page({ 
      data: { 
      // 导航栏初始化距顶部的距离
        navbarInitTop: 300,
        // 是否固定顶部
        isFixedTop: false,
      },
      onShow: function () { 
        // 吸顶
        let that =this;
        if(that.data.navbarInitTop==0){ 
          // 获取节点距离顶部的距离
          wx.createSelectorQuery().select("#navbar").boundingClientRect(function(rect){ 
            if(rect && rect.top>0){ 
              let navbarInitTop=parseInt(rect.top);
              that.setData({ 
                navbarInitTop:navbarInitTop
              });
            }
          }).exec();
        }
      },
      // 监听页面滑动事件
    onPageScroll:function(e){ 
      let that=this;
      let scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
      //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
      let isSatisfy = scrollTop > that.data.navbarInitTop ? true : false;
       that.setData({ 
        isFixedTop: isSatisfy
       });
    },
      })

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序中的吸顶效果（小程序操作DOM）

小程序中的吸顶效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

Myth丶恋晨/ 2022年12月29日 09:37/ 0 赞/ 153 阅读

相关移动端吸顶效果(小程序，h5)

移动端吸顶效果(小程序，h5) 前言：移动端h5开发页面很多吸顶的需求，滚动到指定范围~要实现特殊内容区域置顶吸顶的效果；使用条件： 1、父元素不能ov

小灰灰/ 2022年12月21日 14:53/ 0 赞/ 290 阅读

相关微信小程序实现吸顶效果

先看一下效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

叁歲伎倆/ 2022年11月27日 10:29/ 0 赞/ 311 阅读

相关小程序标签滑动吸顶

1、HTML <view class="title { {isFixedTop?'title-fixed':''}}" id="navbar">

妖狐艹你老母/ 2022年11月14日 12:00/ 0 赞/ 196 阅读

相关元素滚动吸顶效果

position: sticky 粘性定位的元素是依赖于用户的滚动. 它的行为就像 position:relative，而当页面滚动超出目标区域时，它的表现就像 posit

曾经终败给现在/ 2022年11月03日 10:43/ 0 赞/ 223 阅读

相关小程序吸顶效果

<template> <view class="full"> <view class="full222"> </vie

比眉伴天荒/ 2022年10月05日 08:58/ 0 赞/ 227 阅读

相关 html设置吸顶效果

html设置吸顶效果方法一：js设置 window.onscroll = function () { // 滑动时搜索框吸顶

青旅半醒/ 2022年09月03日 05:17/ 0 赞/ 533 阅读

相关小程序制作吸顶菜单（监听滚动条）

1.使用onPageScroll()函数监听滚动条 onPageScroll(e){ //参数e会返回滚动条滚动的高度 console.lo

蔚落/ 2022年02月01日 14:47/ 0 赞/ 673 阅读

相关 js 吸顶 vue 吸顶

页面吸顶的效果，实现有两种，最快的一种是用position: sticky方法，不过该方法尚存在兼容性问题，使用的时候需加入兼容方法。使用方法跟position:

客官°小女子只卖身不卖艺/ 2022年01月23日 13:11/ 0 赞/ 340 阅读

相关微信小程序wxs实现吸顶效果

在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行，导致了整个用户交互的

淡淡的烟草味﹌/ 2021年11月09日 12:38/ 0 赞/ 627 阅读