html - Angular 2 : Floating button not floating CSS

Question

我是前端开发和 Angular 2 的新手。我试图在 Web 应用程序的右下角编写一个 float 按钮，允许用户在需要时打开购物车(购物车按钮)。我遇到的问题是按钮出现在屏幕上，向下滚动后不会重新调整其位置，它的位置固定在一个位置并且不会移动。

HTML:

<md-sidenav-container class="example-container">
  <md-sidenav #sidenav class="example-sidenav">
    <div class="scroll">
      <md-card *ngFor="let ticket of shoppingCart">
        <md-card-title>{{ticket.product.name}}</md-card-title>
        <md-card-subtitle>$ {{ticket.product.price}}</md-card-subtitle>
        <md-card-subtitle>Quantity: {{ticket.quantity}}</md-card-subtitle>
        <button md-icon-button (click)="removeProduct(ticket.product)">
          <md-icon>delete</md-icon>
        </button>
      </md-card>
      <button md-button class="checkout" (click)="openDialog()">CHECKOUT</button>
    </div>
  </md-sidenav>


  <div id="cart-button">
    <button md-icon-button (click)="openNav(sidenav)" id = "cart-button2">
      <md-icon>shopping_cart</md-icon>
    </button>
  </div>

  <app-banner *ngIf="!featured"></app-banner>


  <form *ngIf="!featured" class="cont">
    <md-input-container class="search">
      <input mdInput placeholder="Search" type="text" (keyup)="onKeyUp(search.value)" #search>
    </md-input-container>
    <md-select placeholder="Categories" class="category">
      <md-option *ngFor="let category of categories" (click)="change(category)">
        {{ category }}
      </md-option>
    </md-select>
  </form>

  <md-grid-list cols="5" rowHeight="1:1.4" class="size">
    <md-grid-tile *ngFor="let product of products" class="separation">
      <md-card class="example-card">
        <md-card-header>
          <div md-card-avatar class="example-header-image"></div>
          <md-card-title>${{product.price}}</md-card-title>
          <md-card-subtitle>{{product.name}}</md-card-subtitle>
        </md-card-header>
        <div class="image-container" [ngStyle]="{'background-image': 'url(' + product.imgUrl + ')'}" [routerLink]="['/product', product.id]">
        </div>
        <md-card-actions>

          <button md-button (click)="addToCart(product.id, 1, sidenav)">ADD TO CART</button>

        </md-card-actions>
      </md-card>
    </md-grid-tile>
  </md-grid-list>

  <div id="fidget-spinner-container" *ngIf="firstLoad">
    <md-spinner id="fidget-spinner" *ngIf="!featured"></md-spinner>
  </div>

</md-sidenav-container>

CSS:

.size {
  width: 1400px;
  margin:100px auto;
}

.example-card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,.3);
  transition: 0.3s;
  width: 400%;
  border-radius: 5px;
}

.example-card:hover {
  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.5);
}
.example-header-image {
  background-image: url('https://img2.hkrtcdn.com/1434/prd_143361_c_l.jpg');
  background-size: cover;
}

.example-container {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.example-sidenav {
  padding: 100px 50px 0 50px;
  width: 250px;
}

.checkout {
  bottom: 30px;
  position: fixed;
}

.image-container {
  width: 200px;
  height: 200px;
  background: white center no-repeat;
  background-size: contain;
}

.mat-card-image:first-child {
  margin-top: 0 !important;
}

.example-card {
  margin:15px;
}

.scroll {
  overflow-x: auto;
  width:100%;
  height:80%;
}

.cont {
  width:70%;
  padding-right:15%;
  padding-left:15%;
  padding-top: 330px;
  display: inline-flex;
}

.search {
  width:70%;
  padding-left:10%;
  /*margin-left: 30%;*/
  /*margin-right: 30%;*/
}

#fidget-spinner {
  margin:auto;
  padding-bottom:50px;
}

.mat-option {
  color: black;
}

#cart-button {
  position:fixed;
  width:60px;
  height:60px;
  bottom:40px;
  right:40px;
  background-color: #666666;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  box-shadow: 2px 2px 3px #999;
}

.cart-button2 {
  margin-top:22px;
}

.category {
  padding-right:10%;
  padding-top: 10.4px;
  width:20%;
}

Answer 1

我通常在我的主要模块组件中做的是:

  template: `
  <div class="container-fluid" [ngStyle]="containerDivSize">

    <router-outlet>
    </router-outlet>

  </div>
  `,

所以上面的容器模板将 div 定义为屏幕的大小，并且通过在下面的窗口调整大小事件上设置观察者，containerDivSize 适应窗口大小和方向的变化，所以如果用户调整我们获取更新的窗口大小。这意味着我们知道屏幕的确切像素尺寸，并且我们调整包含的 div 以填充窗口，而不管任何更改。

  containerDivSize: any;

  constructor(){}

  ngOnInit() {
    Observable.fromEvent(window, 'resize')
      .map(getWindowSize)
      .subscribe(
      windowSize$ => {
        var windowHeight = windowSize$.height;
        var windowWidth = windowSize$.width;
        this.containerDivSize = {
          'height': windowHeight + 'px'
          'width': windowHeight + 'px'
        }
      });
  }

您可以使用相同的方法定义一个按钮位置样式，该样式采用窗口宽度和高度，减去按钮大小并将其应用于您的按钮，无论怎样，它都将始终固定在窗口的右下角内用户做什么(滚动或调整窗口大小)。

也许是这样的:

  buttonPosition: any;

        var buttonVerticalPosition = windowSize$.height-50;
        var buttonHorizontalPosition = windowSize$.width-120;

        this.buttonPosition = {
            'position': 'absolute',
            'top': buttonVerticalPosition + 'px',
            'left': buttonHorizontalPosition + 'px'
        }

然后将该类添加到您的按钮。

<button class="btn btn-sm btn-default buttonPosition" >View Cart</button>