<section class="header"> <h1 class="header-title">ナビゲーションサンプルその1</h1> <p class="header-sub-title">途中からナビゲーションを固定</p> <ul class="header-nav"> <li><a class="nav-tab" href="#content1">CONTENT1</a></li> <li><a class="nav-tab" href="#content2">CONTENT2</a></li> <li><a class="nav-tab" href="#content3">CONTENT3</a></li> <li><a class="nav-tab" href="#content4">CONTENT4</a></li> <li><a class="nav-tab" href="#content5">CONTENT5</a></li> </ul> </section> <section class="contents"> <div class="content" id="content1"> <h2 class="content-title">CONTENT1</h2> <p>something about content1</p> </div> <div class="content" id="content2"> <h2 class="content-title">CONTENT2</h2> <p>something about content2</p> </div> <div class="content" id="content3"> <h2 class="content-title">CONTENT3</h2> <p>something about content3</p> </div> <div class="content" id="content4"> <h2 class="content-title">CONTENT4</h2> <p>something about content4</p> </div> <div class="content" id="content5"> <h2 class="content-title">CONTENT5</h2> <p>something about content5</p> </div> </section>
.header, .content { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; height: 100vh; background: #eee; .header-title, .content-title { font-size: 1.5rem; margin: 0; letter-spacing: 0.5rem; } .header-sub-title { font-size: 1.0rem; opacity: 0.6; } } .header-nav { display: flex; position: absolute; bottom: 0; width: 100%; height: 70px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background: #fff; z-index: 10; li { flex: 1; height: 100%; } &.fixed { position: fixed; top: 0; } } .nav-tab { display: flex; justify-content: center; align-items: center; color: #000; letter-spacing: 0.1rem; transition: all ease-in-out 0.5s; font-size: 0.8rem; height: 100%; text-decoration: none; &:hover { color: #fff; background: #79c3bf; transition: all ease-in-out 0.5s; } }
let _window = $(window), _nav = $('.header-nav'), headerBottom = $('.header').height() - $('.header-nav').height(); _window.on('scroll', function() { if (_window.scrollTop() > headerBottom) { _nav.addClass('fixed'); } else { _nav.removeClass('fixed'); } }); _window.trigger('scroll');