スタイルガイド

フロートメニュー 

<nav class="float-nav">
    <ul>
        <li><a href="#" class="float-nav__item">Menu1</a></li>
        <li><a href="#" class="float-nav__item">Menu2</a></li>
        <li><a href="#" class="float-nav__item">Menu3</a></li>
        <li><a href="#" class="float-nav__item">Menu4</a></li>
        <li><a href="#" class="float-nav__item">Menu5</a></li>
    </ul>
</nav>
<div>
    <p class="text-center">▼▼▼ スクロールしてください ▼▼▼</p>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
</div>
  • Content: 
    .float-nav {
  position: absolute;
  top: 100px;
  left: 16px;
  padding: 16px;
  background: #333;
  transition: top 0.3s;
}

.float-nav__item {
  display: block;
  width: 100px;
  color: #fff;
}
  • URL: /components/raw/float-menu/float-menu.css
  • Filesystem Path: src\components\06-float-menu\float-menu.css
  • Size: 211 Bytes
  • Content: 
    .float-nav {
  position: absolute;
  top: 100px;
  left: $space_lg;
  padding: $space_lg;
  background: $color_main;
  transition: top $speed_fast;
  &__item {
    display: block;
    width: 100px;
    color: $color_opposite;
  }
}
  • URL: /components/raw/float-menu/float-menu.scss
  • Filesystem Path: src\components\06-float-menu\float-menu.scss
  • Size: 245 Bytes
  • Content: 
    (function() {
  const navEl = document.querySelector('.float-nav');
  if(!navEl) {return;}

  let ticking = false;
  document.addEventListener('scroll', menuMove, {passive: true});

  function menuMove() {
    if (!ticking) {
      requestAnimationFrame(function() {
        ticking = false;
        navEl.style.top = `${window.pageYOffset + 100}px`;
      });
      ticking = true;
    }
  }
}());
  • URL: /components/raw/float-menu/float-menu.js
  • Filesystem Path: src\components\06-float-menu\float-menu.js
  • Size: 416 Bytes