我想为我的移动应用程序创建一个 float 操作按钮。类似于 Gmail 和 WhatsApp 移动应用程序中使用的按钮(参见图中的红色按钮)。
我正在使用 jQuery Mobile 构建一个小型应用程序，我希望该按钮能够将用户带到另一个页面。我已经研究了很长时间，结果好坏参半，但主要问题似乎是该按钮并未位于页面上所有其他内容之上，并且在用户滚动后不会固定在某个位置这一页。
有没有人有任何资源或知识可以提供帮助？谢谢
最佳答案
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)以允许您的用户在页面内容为大于屏幕高度。
关于javascript - 如何创建固定 float 加号按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52375938/