【css拾遗】粘性布局实现有滚动条的情况下,按钮固定在页面底部展示

news2024/12/23 11:50:17

效果:
滚动条滚动过程中,按钮的位置位于手机的底部
在这里插入图片描述
滚动条滚到底部时,按钮的位置正常
在这里插入图片描述

这个position:sticky真的好用,我原先的想法是利用滚动条滚动事件去控制,没想到css就可以解决

<template>
  <view class="container">
    <!-- 页面内容 -->
    <!-- ... -->

    <!-- 底部按钮 -->
    <view class="footer-button">
      <button @click="handleButtonClick">按钮</button>
    </view>
  </view>
</template>
<style>
.container {
  position: relative;
  height: 100vh; /* 设置容器高度为屏幕高度 */
  overflow-y: scroll; /* 允许内容溢出并显示滚动条 */
}

.footer-button {
  position: sticky;
  bottom: 0; /* 将容器固定在底部 */
  z-index: 9999; /* 设置 z-index 提高按钮的层级 */
  padding: 10px; /* 设置适当的内边距 */
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1084709.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

程序员爱写不写注释的智慧

&#x1f935;‍♂️ 个人主页&#xff1a;艾迦洼的个人主页 ✍&#x1f3fb;作者简介&#xff1a;后端程序猿 &#x1f604; 希望大家多多支持&#xff0c;如果文章对你有帮助的话&#xff0c;欢迎 &#x1f4ac;&#x1f44d;&#x1f3fb;&#x1f4c2; 目录 &#x1f44b;程…

数据结构--》连接世界的无限可能—— 图

图作为数据结构中的一种重要概念&#xff0c;扮演着连接世界的纽带。与树和二叉树相比&#xff0c;图更加灵活和多样化&#xff0c;它能够描述各种实际问题中的复杂关系&#xff0c;如社交网络中的人际联系、城市交通中的路线规划以及电子网络中的通信路径等。 无论你是初学者还…

【【萌新的SOC学习之SD卡读写TXT文本实验】】

萌新的SOC学习之SD卡读写TXT文本实验 SD卡 Secure Digital Card SD卡的引脚定义 我们会用的数据脚就这几个 对于我们FPGA 其实更会倾向于选择 SPI的功能 而TF卡相对于SD卡的区别在于 SD卡只有一个电源地 这里相对于原本的SPI多了一个CD引脚 CD信号是相当于一个卡检测…

竞赛选题 深度学习+opencv+python实现车道线检测 - 自动驾驶

文章目录 0 前言1 课题背景2 实现效果3 卷积神经网络3.1卷积层3.2 池化层3.3 激活函数&#xff1a;3.4 全连接层3.5 使用tensorflow中keras模块实现卷积神经网络 4 YOLOV56 数据集处理7 模型训练8 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &am…

光纤激光切割机如何高效的切割铜等高反材料

高反射材料的切割过程往往具有挑战性&#xff0c;对于许多光纤激光切割设备厂商而言都是难以解决的问题。但是作为铜、铝、金等常见的高反射性材料又需要在日常生产中经常进行加工处理。 很多厂家解决的办法之一就是采用相应的辅助气体。在光纤激光切割机切割铜时&#xff0c;辅…

xshell 上传下载文件命令

Windows 和 Linux上传或下载某个文件首先你的 Linux上需要安装安装 lrzsz工具包在Linux 上执行 yum install lrzsz 上传文件&#xff1a; 输入 rz 下载文件&#xff1a;运行命令 sz zcly.tar.gz (zcly.tar.gz)为文件名称

多标签分类论文笔记 | ML-Decoder: Scalable and Versatile Classification Head

个人论文精读笔记&#xff0c;主要是翻译心得&#xff0c;欢迎旁观&#xff0c;如果有兴趣可以在评论区留言&#xff0c;我们一起探讨。 Paper: https://arxiv.org/pdf/2111.12933.pdf Code: https://github.com/Alibaba-MIIL/ML_Decoder 文章目录 0. 摘要1. 介绍2. 方法2.1 Ba…

offer

【录用通知书】 如何判断公司的好坏呢。 注意了&#xff0c;我们软件行业&#xff0c;技术管理类&#xff0c;技术类&#xff0c;产品类 好公司好企业基本都会给你说清楚&#xff0c;一项多少钱&#xff0c;加班多少钱&#xff0c;这样的 像这类公司的薪资结构复杂就要特别…

如何批量导出文件名?

如何批量导出文件名&#xff1f;在电商行业从事工作的一些同事可能经常会遇到这样的问题&#xff1a;需要将产品文件夹中的所有图片或产品名称导出到Excel工作表&#xff0c;在工作表中创建这些名称的超链接&#xff0c;并且可能会为每个产名称的后面填写一些相关信息&#xff…

LeetCode【152】乘积最大子数组

题目&#xff1a; 解析&#xff1a; 理解这个题的过程中&#xff0c;有这样的疑问&#xff1a; -2、0、2、3 子数组最大值是2*3 6&#xff0c;并非dp过程中&#xff0c;从下标0累乘的怎么办&#xff1f;这里不用担心&#xff0c;因为在dp的过程中会逐渐的求Math.max和Math.m…

知识付费小程序的推广与用户增长策略

在知识付费小程序开发完成后&#xff0c;推广和用户增长是关键的成功因素。本文将探讨一些推广策略和用户增长方法&#xff0c;并提供代码示例&#xff0c;帮助您在知识付费小程序中实施这些策略。 1. 社交媒体分享功能 在知识付费小程序中添加社交媒体分享功能&#xff0c;…

多媒体应用设计师 开始

https://www.bilibili.com/video/BV1jv411q7mz/?spm_id_from333.337.search-card.all.click&vd_source25bced4af8c6d5f851758632d0ca8444

【2023年新版】40套BIM+GIS项目案例合集,中建中铁中交企业内部学习资源免费领取

最近有很多做工程的朋友想要学习BIMGIS技术&#xff0c;向我询问相关的学习资源和资料。他们面临的普遍问题是不知道如何入门&#xff0c;找到的资料很多&#xff0c;但是很多却用不上。 为了解决大家的问题&#xff0c;我们团队花了近一个月的时间&#xff0c;精心整理了一份…

Vue3实战(05)-教你快速搭建Vue3工程化项目

除了Vue 3这个库&#xff0c;还需Vue 3 最新全家桶。 1 环境准备 之前语法演示直接使用script引入Vue 3&#xff0c;从而在浏览器里实现所有调试功能。但实际项目中&#xff0c;使用专门调试工具。在项目上线之前&#xff0c;代码也需打包压缩&#xff0c;并考虑到研发效率和…

C语言文件操作(2)

&#x1f649;本文将继续对文件操作相关知识进行讲解 1. 文件的随机读写 1.1 fseek fseek函数原型&#xff1a; fseek简而言之就是设置文件中的光标&#xff0c;stream就指向对象文件的指针&#xff0c;offset是文件中光标处相对于起始位置的偏移量&#xff0c;origin是光标所…

Docker 容器应急

容器网络简单理解 容器拥有n多张veth网卡与一张docker0网卡 docker 五种网络 bridge 默认网络&#xff0c;Docker启动后创建一个docker0网桥&#xff0c;默认创建的容器也是添加到这个网桥中。host 容器不会获得一个独立的network namespace&#xff0c;而是与宿主机共用一个…

关于Win系统提示由于找不到msvcr120.dll文件问题解决办法

在我使用电脑的过程中&#xff0c;突然弹出了一个错误提示框&#xff0c;提示我系统中缺少msvcp120.dll文件。这个文件是系统运行所必需的&#xff0c;缺少它可能会导致一些软件无法正常运行。经过一番搜索和咨询&#xff0c;我找到了以下几种解决方案&#xff0c;分享给大家&a…

【Java学习之道】文件输入输出流

引言 今天&#xff0c;我们将一起学习Java中的文件输入/输出流&#xff0c;这是许多初学者感到困惑但实际工作中经常遇到的问题。在本部分&#xff0c;我们将探讨文件输入/输出流的基本概念&#xff0c;以及如何使用Java中的类来处理文件输入/输出。 一、文件输入/输出流的概…

C语言,输出最长连号的个数

数据范围&#xff1a;0 < n <10000. 最长连号&#xff0c;就是一组数字里面出现的连续的数字的最长长度。这里的连号最长是2 3 4 5 6&#xff0c;个数为5。 要实现求连号的个数&#xff0c;就要创建一个变量&#xff0c;用来专门计算连号的个数。在不满足连号时&#xf…

shiro反序列化漏洞分析

分析源码 我们去源码里面去找找&#xff0c;搜索rememberMe&#xff1a; 发现有一个 CookieRememberMeManager 这个类&#xff0c;看名字就知道他多半就是处理 RememberMe 的逻辑&#xff0c;所以根据该类查看它干了什么 这里继承 AbstractRememberMeManager 类&#xff0c;Ab…