角度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。它会把你放在里面的东西放在身体里。

其他解决方案正在注册到滚动事件并每次重新设置位置。这会导致移动设备性能不佳。