ios-no-lug-sticky

by Yutaro Miyazaki

HTML

<body class="home">
  <div class="l-container">
    <aside class="m-banner">Banner</aside>
    <nav id="menu" class="l-navigation">
      <ul class="l-navigation__list">
        <li class="l-navigation__left">menu</li>
      </ul>
    </nav>
    <div id="menu-dummy" class="l-header--dummy"></div>
    <div id="main" class="l-main">
      <div class="l-block"><img src="http://placehold.it/640x340/27709b/ffffff">
        <div class="l-block__inner">
          <h2>Title</h2>
          <p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮はすの花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好よい匂いが、絶間なくあたりへ溢て居ります。極楽は丁度朝なのでございましょう。</p>
          <p>やがて御釈迦様はその池のふちに御佇になって、水の面おもてを蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の景色が、丁度覗眼鏡を見るように、はっきりと見えるのでございます。</p>
          <p>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮はすの花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好よい匂いが、絶間なくあたりへ溢て居ります。極楽は丁度朝なのでございましょう。</p>
          <p>やがて御釈迦様はその池のふちに御佇になって、水の面おもてを蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河や針の山の景色が、丁度覗眼鏡を見るように、はっきりと見えるのでございます。</p>
        </div>
      </div>
    </div>
    <footer class="l-footer"></footer>
  </div>
  <script src="/assets/js/bundle_sp.js"></script>
</body>

SCSS

* {
  box-sizing: border-box;
}


img {
  width: 100%;
}


.m-banner {
  line-height: 60px;
  height: 60px;
  text-align: center;
  background-color: #eee;
}


.l-navigation {
  width: 100%;
  padding: 10px;
  background-color: #7f7f7f;
  transform: translate3d(0, 0, 0);
  &__list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #fff;
  }
}


.l-block {
  &__inner {
    padding: 18px;
  }
}

JavaScript

var scroll = {
  init: function() {
    var menu = document.getElementById('menu');
    var dummy = document.getElementById('menu-dummy');

    var trigger = menu.offsetTop;

    dummy.style.height = menu.clientHeight + 'px';
    dummy.style.display = 'none';

    this.handleScroll(menu, dummy, trigger);
    window.addEventListener('scroll', () => this.handleScroll(menu, dummy, trigger), { passive: true });
  },
  handleScroll: function(menu, dummy, trigger) {
    if (window.pageYOffset >= trigger) {
      menu.style.position = 'fixed';
      menu.style.top = 0;
      dummy.style.display = 'block';
    } else {
      menu.style.position = '';
      dummy.style.display = 'none';
    }
  }
}
scroll.init();