How can I create a fixed floating plus button?

问题

I'm looking to create a floating action button for my mobile application. Similar to the ones used in the Gmail and WhatsApp mobile applications (see the red button in the image).

I'm building a small app using jQuery Mobile and I would like the button to bring the user to another page. I've been researching for quite a while, with mixed results, but the main problem seems to be that the button doesn't sit above all of the other content on the page and doesn't stay fixed in a position once the user scrolls the page.

Does anyone have any resources or knowledge that could assist? Thank you

回答1:

The JQM footer has already the fixed positioning and the correct z-index which plays nicely together with the other JQM widgets, like panels and so on. Why don't use that?

The classes ui-btn-left and ui-btn-right don't behaves well in footer, so I am using a grid with transparent background. The advantage with this approach is that You can quickly add more buttons, if You need it later.

.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>

Moreover, You can decide to use data-tap-toggle="false" on not (default is true) to allow Your users to show the footer buttons on demand, when the page content is bigger than the screen height.

回答2:

this is more a CSS question than a JS question although you could use either to solve it. In CSS that button element or whatever element contains it should have the attributes; position: absolute; and a z-index: x; (a z-index which is higher than any other element in the DOM). If you try to solve this with JS then you still have to have a z-index property and that only works when and element has a fixed, absolute, or relative position attribute... so you may as well just use CSS. you could use js to determine the hight of the window (the device height on mobile since the browsers are not resize-able like on a desktop) and then set the top: Xpx attribute so that to button appears to be in the same position regardless of the device.

回答3:

I think this pen would help you. It has a tutorial link.

To make sure that your button is above all other elements, add z-index: 999 to your button in css.

You can think of z-index as layers. So a z-index: 2 element will be above a z-index:1 element.

For further details about the z-index css property go here and here.

回答4:

Here you are: https://material.io/develop/web/components/buttons/floating-action-buttons/

Read more about it here: https://material.io/design/components/buttons-floating-action-button.html

回答5:

Have you tried using the "fixed" or "sticky" property values in CSS to hold the image in a relative position to browser window or user's scroll position?

Hope this helps, it's the first idea that comes to mind.

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

来源：https://stackoverflow.com/questions/52375938/how-can-i-create-a-fixed-floating-plus-button

标签

javascript

jquery

html

css

jquery-mobile