滚动时如何使按钮固定在底部

Question

我对Ionic，HTML和CSS还是很陌生。我试图弄清楚如何在滚动页面时使按钮保持固定。即使我在css上指定了固定值，按钮也无法保持固定状态。

按钮不固定在底部

  .fix-bottom {
  position: fixed;
  width: 100%;
  bottom: 0px;
  left: 0px;
}

  .d-flex {
  display: flex;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

<div class="fix-bottom btn-shadow ">
  <div class="d-flex">
    <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD TO CART</button>
    <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY NOW</button>
  </div>
</div>

Answer 1

如果您想将按钮放在页面底部，则需要像这样将按钮放在 ion-footer 中

 <ion-content>.... </ion-content>
<ion-footer>
  <button ion-button full (click)="addToCartProduct()" style="width: 50%; height: 45px;background-color: #3498db">ADD
    TO CART</button>
  <button ion-button full style="width: 50%; height: 45px;background-color: #f53d3d;" (click)="proceedToCheckOut()">BUY
    NOW</button>
</ion-footer>

我已经在此模板中尝试过您的代码，并且该代码正在运行。因此，请尝试此代码。

Answer 2

尝试以下示例。当您向上滚动时，按钮将保持底部固定。这是简单的CSS。我多次添加段落只是为了显示滚动效果。

#bottom button {
  position: fixed;
  right: 10%;
  bottom: 0%;
  z-index: 1000;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
 filter: progid: dximagetransform.microsoft.basicimage(rotation=3);
  text-align: center;
  text-decoration: none;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<p>I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.
</p>
<p>The button somehow does not stay fixed at the bottom 
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.</p>

<p>The button somehow does not stay fixed at the bottom 
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.</p>

<p>The button somehow does not stay fixed at the bottom 
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.</p>

<p>The button somehow does not stay fixed at the bottom
I am quite new to ionic, html and css. I'm trying to figure out how to make the button stay fixed when scrolling the page. Somehow the button does not stay fixed even when I state fixed value on css.

The button somehow does not stay fixed at the bottom </p>
<div id="bottom">
    <button id="bot_open" class="btn btn-primary btn-rounded">Button</button>
  </div>