VUEは底部吸引ボタンを実装

<テンプレート>
 <div id="テスト">
 <ul class="リストボックス">
 <li v-for="(item, key) 50 個中" :key="キー">
 {{ アイテム }}
 </li>
 </ul>
 <トランジション名="フェード">
 <p :class="['go', { isFixed: headerFixed }]" v-if="headerFixed">
 吸引底ボタン</p>
 </トランジション>
 </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
 名前: 'テスト',
 データ（） {
 戻る {
 ヘッダー固定: false、
 }
 },
 マウント() {
 window.addEventListener('スクロール'、this.handleScroll)
 },
 破壊された() {
 window.removeEventListener('スクロール'、this.handleScroll)
 },
 メソッド: {
 ハンドルスクロール() {
 定数スクロールトップ =
 window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 this.headerFixed = スクロールトップ > 50
 },
 },
}
</スクリプト>
 
<style lang="scss" スコープ="スコープ">
＃テスト {
 .リストボックス{
 パディング下部: 50px;
 }
 。行く {
 背景: ピンク;
 テキスト配置: 中央;
 行の高さ: 50px;
 幅: 100%;
 }
 .isFixed{
 位置: 固定;
 下部: 0;
 }
 .フェードエンター{
 不透明度: 0;
 }
 .フェード-エンター-アクティブ {
 遷移: 不透明度 0.8 秒;
 }
 .フェードアウト{
 不透明度: 0;
 }
 .フェードアウトアクティブ{
 遷移: 不透明度 0.8 秒;
 }
}
</スタイル>