How to make buttons stay fixed at the bottom while scrolling

问题: 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 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

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

回答1:

If you want to put your button in bottom of the page then, You need to put your button in ion-footer like this way

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

I have tried your code in this template and it's working.so please try this code.


回答2:

Try this example. When you scroll to the up the button stays bottom fixed. It's simple css. I've add paragraph many times just to show scrolling effect.

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

  • 发表于 2019-03-08 17:21
  • 阅读 ( 283 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除