Vueのイベントリスナーは、（ページがスクロールした後）ナビゲーションバーの天井効果を実現します

Vueのイベントリスナーは、（ページがスクロールした後）ナビゲーションバーの天井効果を実現します

 

Howie126313  懸念

2017年11月19日15:05 *  単語100  読む3154件のコメント0 好き0

彼は、以下に示すように天井効果は、ナビゲーションバーの効果をスライドページまではないと述べました。

 

ページを上にスライドすると、ナビゲーションバーは、常にページの上部に固定されています。

 

特定のコード：

スクロールバーを聞いて、イベントリスナーを書きます。

mounted () {
      // 事件监听滚动条
      window.addEventListener('scroll', this.watchScroll)
    }

そして、watchScroll方法の方法で書きます。

methods: {
      watchScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        // 当滚动超过 50 时，实现吸顶效果 if (scrollTop > 49) { this.navBarFixed = true } else { this.navBarFixed = false } } } 

対応するタグで修飾された形態の添加後

<div :class="navBarFixed == true ? 'navBarWrap' :''">

.navBarWrap {
    position:fixed;
    top:0;
    z-index:999; } 

END ~~