More than 5 years have passed since last update.

スクロールしたら2段目だけついてくる2段メニューを作る

Posted at 2015-12-27

小ネタ的な内容ですが、スクロールしたら2段目だけついてくるメニューの作り方のメモです。
iPhone6sの公式サイトにあるメニューのようなイメージです。

サンプルコード

sample.html

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <link rel="stylesheet" type="text/css" href="sample.css">
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="sample.js"></script>
</head>
<body>
<nav>
  <ul id="mainmenu" class="menu">
    <li>1st menu1</li>
    <li>1st menu2</li>
    <li>1st menu3</li>
  </ul>
  <ul id="submenu" class="menu">
    <li>2nd menu1</li>
    <li>2nd menu2</li>
    <li>2nd menu3</li>
  </ul>
</nav>
<div id="content">contents</div>
</body>
</html>

sample.css

* {
    margin: 0;
    padding: 0;
}
nav {
    width: 100%;
    height: 96px;
    width: 920px;
    margin: 0 auto;
}
ul.menu {
    width: 920px;
    height: 48px;
    display: block;
}
ul.menu li {
    list-style-type: none;
    float: left;
    padding-left: 12px;
    line-height: 48px;
}
ul#mainmenu {
    background-color: red;
}
ul#submenu {
    background-color: blue;
}
div#content {
    height: 800px;
    width: 920px;
    margin: 0 auto;
}
ul.menu-fixed {
    position: fixed;
    top: 0;
}

sample.js

$(function() {
    var submenu = $('#submenu');
    var offset = submenu.offset();

    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
            submenu.addClass('menu-fixed');
        } else {
            submenu.removeClass('menu-fixed');
        }
    });
});

ちょっと解説

あらかじめ2段目のメニューをトップに固定するclass（サンプルだと.menu-fixed）を用意し、
スクロール時にウィンドウのトップと2段目のメニューの位置を比較して
ウィンドウの位置が2段目のメニューより下だったら上記classを追加しています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up