スクロール位置によってサイドバーやナビゲーションを固定・解除する jQuery のシンプルな実装方法と注意点

ページをスクロールしていると、途中から要素が固定表示される動きをするサイトを時折見ます。ナビゲーションだったりサイドバーの目立たせたいところだったり、用途は様々。 例えば、SaCSS の 以前のスペシャルページでも利用していたように、ページ途中で出てくるナビゲーションが、画面の一番上に触れると固定されて以降ずっとついてくるような動きをする。 SaCSS WordBench Sapporo,Late2013 この実装はそれほど難しくなく、比較的簡単に実装できるのですが、諸所気にかけておいたほうが良い部分があったりする。 シンプルな実装方法を紹介しつつ、注意点も書いておこうと思う。

[vent0819]

これが個人的に1番わかりやすくてやりやすかった

[yoyo9140]

“$(function () { var $body = $('body'), $navTypeA = $('.nav--typeA'), navTypeAOffsetTop = $navTypeA.offset().top; $(window).on('scroll', function () { if($(this).scrollTop() > navTypeAOffsetTop) { $body.addClass('is-fixed'); } else { $body.removeClass('is-fixed'); } }); });”