ANGULAR 2: Floating-Button nicht Floating CSS

Question

Ich bin sehr neu in Frontend-Entwicklung & eckig 2. Ich habe versucht, eine schwebende Schaltfläche auf der rechten unteren Seite der Webapp, die Benutzer den Warenkorb bei Bedarf öffnen können Taste). Das Problem, das ich habe, ist, dass die Taste auf dem Bildschirm erscheint, stellen Sie es nicht seine Position neu justiert einmal gescrollt, seine Position ist auf eine Stelle fixiert und es wird nicht bewegen.

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

Was ich in der Regel tun, ist dies in meinem Hauptmodul-Komponente:

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

    <router-outlet> 
    </router-outlet> 

    </div> 
    `, 

So ist die Vorlage oben für die Behälter definiert die div, um genau der Größe des Bildschirms zu entsprechen, und indem Sie einen Observer auf Fenstergrößenänderungsereignisse setzen, containerDi vSize passt sich an Änderungen der Fenstergröße und -ausrichtung an. Wenn der Benutzer die Größe des Fensters ändert, erhalten wir die Aktualisierungen. Das bedeutet, dass wir die genauen Pixelmaße des Bildschirms kennen, und wir dimensionieren unser enthaltendes div, um das Fenster zu füllen, unabhängig von irgendwelchen Änderungen.

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' 
     } 
     }); 
    } 

Sie können diese gleiche Methode verwenden, um eine Tastenposition Stil zu definieren, die die Fensterbreite und Höhe nimmt, die Knopfgröße abziehen und es auf Ihre Schaltfläche anwenden, die immer nur in der unteren rechten Ecke fixiert werden bleiben von das Fenster, egal was der Benutzer tut (scrollen oder Größe ändern).

Vielleicht so etwas wie folgt aus:

buttonPosition: any; 

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

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

Dann diese Klasse auf Ihre Schaltfläche hinzufügen.

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

Answer 2

Das Problem ist, dass Sie Materal2 verwenden, die transform3D in seinem Stil verwendet. Aus diesem Grund funktioniert relative postion nicht. Sie sollten Ihren Knopf in this component setzen. Es nimmt, was auch immer du hineinlegst und es in den Körper setzt.

Andere Lösungen registrieren sich bei einem Scroll-Ereignis und stellen die Position jedes Mal neu ein. Dies führt zu einer schlechten Leistung auf Mobilgeräten.