javascript - 滚动时 Material VueJS 组件未固定在底部页面

Question

我正在使用 <md-progress-bar>我的 VueJS 应用程序上的组件，但我想在滚动页面时将你的位置固定在底部屏幕上。我试过 set style position: fixed; , absolute和 relative但没有人工作。

<template>
  <div>
  ...
    <md-progress-bar style="position: absolute;" md-mode="indeterminate" v-show="true"></md-progress-bar>
  </div>
</template>

还有……

<md-progress-bar
  style="position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;"
  md-mode="indeterminate"
  v-show="true"
></md-progress-bar>

Answer 1

Vue.use(VueMaterial.default)

new Vue({
  el: '#app'
})

div.md-progress-bar--fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.spacer {
  height: 1000vh;
}

.as-console-wrapper {
  display: none !important;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">

<div id="app">
 <div class="spacer"></div>
  <md-progress-bar class="md-progress-bar--fixed" md-mode="indeterminate" v-show="true"></md-progress-bar>
</div>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-material"></script>
<script>
</script>