【プロフィールページ改修第8回】ヘッダーナビゲーションのモーダル化とスムーススクロール

引き続き、プロフィールページを作成していきます。

yushi-dev.hatenablog.com

技術スタックは下記の通りです。

nuxt.js
SCSS
Tailwind CSS

今回はヘッダーナビゲーションの改善を行います。

ヘッダーナビゲーションのモーダル化

前回Responsive対応を行なったので、今回はヘッダーナビゲーションもスマートフォン向けに改善します。

完成イメージは下記の通りです。

f:id:yushi0:20220306234036p:plain

バツ印にはアニメーションをつけます。

f:id:yushi0:20220306235650g:plain

template

  <div
    class="nav-modal flex justify-center items-center"
    :class="navClass"
    @click="$emit('close')"
  >
    <ul class="ul flex flex-col justify-between">
      <li v-for="link in links" :key="link.label">
        <a @click="$emit('jump', link.href)">{{ link.label }}</a>
      </li>
    </ul>
  </div>

.nav-modal {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 9000;
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.5s;
  opacity: 0;
  pointer-events: none;

  &.show {
    opacity: 1;
    pointer-events: auto;
    transition: all 0.5s;
  }
  * {
    font-size: 30px;
  }
  a {
    cursor: pointer;
    text-decoration: none;
  }
}
.ul {
  height: 40%;
}

ヘッダー固定化

ヘッダーを固定化して、ページのどの位置からでも好きな位置に移動できるようにします。

下記のようなイメージです。

f:id:yushi0:20220307001759g:plain

ヘッダー固定化自体は単にposition: fixed;と指定してます。

工夫しているのは、メインイメージを通り過ぎた後は、ヘッダーの背景色を緑にしているところです。
色は、メインイメージからスポイトで取り出して設定しています。

  mounted() {
    window.addEventListener('scroll', () => {
      const header = document.querySelector('.hero-image')
      this.isScrolled = window.scrollY > header.clientHeight - 50
    })
  },

.header {
  z-index: 8000;
  .header-wrap {
    & > * {
      transition: 1s;
    }
  }
  &.scrolled {
    .header-wrap {
      & > * {
        background-color: $main-1;
      }
    }
  }
}

スムーススクロール

ヘッダーナビゲーションのリンク移動を、スクロールで行う機能を実装しました。

下記のようなイメージです。

f:id:yushi0:20220307002729g:plain

    scrollLink(href) {
      const target = document.querySelector(href)
      const top = target.offsetTop - 30;
      window.scrollTo({
        top,
        behavior: 'smooth',
      })
    },