vueスクロール固定トップとスタイル変更の実例コード

スクロールの固定位置には様々な方法があります。
1 css 3  スティッキー位置決め

position:sticky；
top:20px；

2直接position：fixed；上の箱にmagin-topをセットするとちょうど固定する箱の高さが必要です。
3イベントモニターはスタイルの中のpositionのプロパティを変更します。
＊＊
スタイルの変更
スクロール傍受イベントにthis.$refs.xxx.style.color=‘xxxx' を使うとエラーが発生します。Uncaught TypeError: Cannot read property 'style' of undefinedしたがって動的結合によって解決される。
具体的:
＊＊
バインディング

 <p class="ptop1" :style="pstyle">
    <img @click="back()" :src='topimgs'>
   </p>

dataに属性を設定する

 data() {
  return {
   pstyle:{background:'#595552'},
   pastyle:{background:'#595552'},
   pbstyle:{background:'#fff'},
  };
 },

mountedにイベントの傍受を追加します。window.addEventListener(“scroll”, this.handleScroll);methodsに方法を追加し、方法で修正します。

 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop>100){
     this.pstyle=this.pbstyle;
    }else{
     this.pstyle=this.pastyle;
    }

締め括りをつける
上记は小编が绍介したvueスクロール固定トップと修正スタイルの実例コードです。皆さんに助けてほしいです。もし何か疑问があれば、メッセージをください。小编はすぐに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
本文があなたのためになると思ったら、転載を歓迎します。出所を明記してください。ありがとうございます。