如何创建固定的浮动加号按钮？

Posted 2023-05-09

技术标签:

【中文标题】如何创建固定的浮动加号按钮？【英文标题】：How can I create a fixed floating plus button? 【发布时间】：2019-02-21 20:41:32 【问题描述】：

我希望为我的移动应用程序创建一个浮动操作按钮。类似于 Gmail 和 WhatsApp 移动应用程序中使用的那些（请参见图片中的红色按钮）。

我正在使用 jQuery Mobile 构建一个小型应用程序，我希望该按钮能够将用户带到另一个页面。我已经研究了很长一段时间，结果好坏参半，但主要问题似乎是该按钮并未位于页面上所有其他内容的上方，并且一旦用户滚动就不会保持固定位置这页纸。

有没有人有任何资源或知识可以提供帮助？谢谢

【问题讨论】：

如果它停留在屏幕上的固定位置，即 css position: fixed 并且位于所有其他字段的顶部，则意味着它的 z-index 比页面上的任何其他内容都大。跨度> 【参考方案1】：

JQM footer 已经有fixed 定位和正确的z-index 可以与其他JQM 小部件（如面板等）很好地配合使用。为什么不使用它？

ui-btn-left 和 ui-btn-right 类在 footer 中表现不佳，因此我使用了具有透明背景的网格。这种方法的优点是您可以在以后需要时快速添加更多按钮。

.ui-footer 
  border-width: 0 !important;
  background: transparent !important; 


.ui-grid-d  
  overflow: visible !important;
  background: transparent !important;

.ui-grid-d > .ui-block-a,
.ui-grid-d > .ui-block-b,
.ui-grid-d > .ui-block-c,
.ui-grid-d > .ui-block-d,
.ui-grid-d > .ui-block-e 
  text-align: center !important;
  background: transparent !important;
  padding-top: .3em;
  padding-bottom: .9em;


.ui-icon-big 
  height: 40px !important;
  width: 40px !important;
  margin-top: -18px !important;
  border-radius: 20px !important;

.ui-icon-big:after 
  width: 32px !important;
  height: 32px !important;
  background-size: 22px !important;
  background-color: #F4123D !important;
  background-color: rgba(244, 18, 61, 0.8) !important;
  margin-top: -16px !important;
  margin-left: -16px !important;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script src="script.js">
  </script>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-role="content">
      <h3>Page content</h3>
      <hr>
    </div>
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
      <div class="ui-grid-d">
        <div class="ui-block-a"></div>
        <div class="ui-block-b"></div>
        <div class="ui-block-c"></div>
        <div class="ui-block-d"></div>
        <div class="ui-block-e">
          <a href="#" class="ui-btn ui-corner-all ui-icon-plus ui-icon-big ui-btn-icon-notext"></a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

此外，当页面内容大于屏幕高度时，您可以决定不使用data-tap-toggle="false"（默认为 true）以允许您的用户按需显示页脚按钮。

【讨论】：

【参考方案2】：

这更像是一个 CSS 问题而不是 JS 问题，尽管您可以使用其中任何一个来解决它。在 CSS 中，按钮元素或包含它的任何元素都应该具有属性；位置：绝对；和一个z-index：x；（一个高于 DOM 中任何其他元素的 z-index）。如果您尝试使用 JS 解决这个问题，那么您仍然必须拥有一个 z-index 属性，并且该属性仅在元素具有固定、绝对或相对位置属性时才有效……所以您不妨只使用 CSS。您可以使用 js 来确定窗口的高度（移动设备上的设备高度，因为浏览器不能像在桌面上那样调整大小），然后设置 top: Xpx 属性，以便按钮看起来在相同的位置不管的设备。

【讨论】：

它需要fixed 位置，而不是绝对位置，以便在滚动时保持在同一位置。此外，您无需抓取窗口高度即可将其放在屏幕底部。您可以为此设置bottom: 0。【参考方案3】：

我认为pen 会对您有所帮助。它有一个教程链接。

为确保您的按钮高于所有其他元素，请将 z-index: 999 添加到 css 中的按钮。

您可以将z-index 视为层。所以z-index: 2 元素将位于z-index:1 元素之上。

有关z-index css 属性的更多详细信息，请转到here 和here。

【讨论】：

【参考方案4】：

你在这里： https://material.io/develop/web/components/buttons/floating-action-buttons/

在此处了解更多信息： https://material.io/design/components/buttons-floating-action-button.html

【讨论】：

【参考方案5】：