ANGULAR 2：フローティングボタンがフローティングしていないCSS

Question

非常に新しいフロントエンド開発& 2. Webappの右下に浮動ボタンをプログラムして、必要に応じてショッピングカートを開くことができました。ボタン）。私が持っている問題は、ボタンが画面に表示され、一度スクロールダウンしてその位置を再調整しないと、その位置が1つのスポットに固定され、移動しないということです。

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にあなたのボタンを置くべきです。それはあなたがそれを入れて体に入れる場所です。

他の解決策は、スクロールイベントに登録して毎回位置を再設定しています。その結果、モバイルでのパフォーマンスが低下します。