2018.1.24
投稿者: あたい html&css, js, useful

ヘッダーのナビを固定してあとからぬるっと出したいとか

スクロールしたら、ヘッダーのナビがあとからニュっと出てくるサイトあるよね。それ。

HTML

<header>

  ...

</header>

<nav>
...
</nav>

<main>
...
</main>

<footer>
...
</footer>

CSS

.clone-nav {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
transition: .3s;
transform: translateY(-100%);
}
.is-show {
transform: translateY(0);
}

JS

$(function() {

  var $win = $(window),

      $cloneNav = $('nav').clone().addClass('clone-nav').appendTo('body'),

      showClass = 'is-show';

$win.on('load scroll', function() {
var value = $(this).scrollTop();
if ( value > 700 ) {
$cloneNav.addClass(showClass);
} else {
$cloneNav.removeClass(showClass);
}
});
});

 

参考サイト

jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5