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

Question

我想为我的移动应用程序创建一个浮动操作按钮。与 Gmail 和 WhatsApp 移动应用程序中使用的类似 （参见图中的红色按钮）。

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

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

您是否尝试过使用 CSS 中的 "fixed" 或 "sticky" 属性值将图像保持在相对于浏览器 window 或用户的位置滚动位置？

希望这对您有所帮助，这是第一个想到的想法。

https://www.w3schools.com/cssref/pr_class_position.asp

Answer 4

给你： https://material.io/develop/web/components/buttons/floating-action-buttons/

在此处阅读更多相关信息： https://material.io/design/components/buttons-floating-action-button.html

Answer 5

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）以允许您的用户在页面内容大于屏幕高度时按需显示页脚按钮。

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

How can I create a fixed floating plus button?

html

javascript

css

jquery

jquery-mobile