角度2：浮動按鈕不浮動CSS

Question

對前端開發我很新穎&角度2.我試圖在webapp的右下方編程一個浮動按鈕，它允許用戶在需要時打開購物車按鈕）。我遇到的問題是按鈕出現在屏幕上，一旦向下滾動，就不會重新調整其位置，它的位置固定在一個點上，不會移動。

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確切地說是屏幕的大小，並通過在窗口大小事件下面設置Observer來設置containerDi vSize適應窗口大小和方向的變化，所以如果用戶調整窗口大小，我們會得到更新。這意味着我們知道屏幕的確切像素尺寸，並且我們調整包含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> 

Answer 2

問題是你正在使用的是其風格採用transform3D Materal2。由於此relative postion不起作用。你應該把你的按鈕放在this component。它會把你放在裏面的東西放在身體裏。

其他解決方案正在註冊到滾動事件並每次重新設置位置。這會導致移動設備性能不佳。