<section class="header"> <h1 class="header-title">ナビゲーションサンプルその3</h1> <p class="header-sub-title">TOPで固定表示→特定の位置までスクロール→ナビゲーション変化</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: fixed; top: 0; width: 100%; height: 70px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); background: #fff; z-index: 10; transition: all ease-in-out 0.5s; li { flex: 1; height: 100%; } .nav-tab { display: flex; justify-content: center; align-items: center; flex: 1; height: 100%; color: #000; letter-spacing: 0.1rem; transition: all ease-in-out 0.5s; font-size: 0.8rem; text-decoration: none; } .nav-tab:hover { color: #fff; background: #79c3bf; transition: all ease-in-out 0.5s; } } .header-nav.transform { height: 90px; background: #79c3bf; .nav-tab{ color: #fff; } .nav-tab:hover{ color: #000; background: #00a5a0; } }
let _window = $(window), _nav = $('.header-nav'), headerBottom = $('.header').height(); _window.on('scroll', function() { if (_window.scrollTop() > headerBottom) { _nav.addClass('transform'); } else { _nav.removeClass('transform'); } }); _window.trigger('scroll');