ヘッダー・ナビゲーションを固定表示させるアイデア5つ

ヘッダー・ナビゲーションを固定表示させるアイデア5つ 公開日:2017/12/28 /最終更新日:2019/02/09 CSS jQuery・JS Technique 最初から固定表示 基本なので言わずもがなですが一応。単なる固定表示ならCSSの「position: fixed;」だけです。簡単ですね。 HTML <header class="site-header"> <h1 class="site-logo"><img src="images/logo.png" alt="WEBDESIGNDAY"></h1> <nav class="gnav"> <ul class="gnav__menu"> <li class="gnav__menu__item"><a href="">About</a></li> <li class="gnav__menu__item"><a href="">W

[ms_10x]

“var _window = $(window), _header = $('.site-header'), heroBottom; _window.on('scroll',function(){ heroBottom = $('.hero').height(); if(_window.scrollTop() > heroBottom){ _header.addClass('transform'); } else{ _header.removeClass('transform'); }}); _window.trigger('scroll');”

[hideboux]

“サンプル4”

[kenta1984]

“サンプル4”

[lingling_yas]

“下にスクロールで消えて上にスクロールで固定表示”

[kgcrz2]

“position: fixed;”