ページ内ナビゲーションでスムーズスクロールしてページの上部にフィックスしてついてくるというのはよくあると思います。で、下向きの矢印がついてるとスムーズスクロールだとすぐにわかると思うんですけど、フィックスしてついてくるとき、通り過ぎた要素のナビも下を向いてると違和感を感じますよね？
ということで、通り過ぎた要素のナビの矢印が上を向くフィックスナビを考えてみました。
以下はコードです。CSSは見た目の調整にのみ使っているので、省略しています。
矢印はFont Awesomeで入れているので、コピペするときはお忘れなく。
背景画像の切り替えにする場合は、.attr(‘class’,’fa fa-caret-up’)を.css(‘background-image’,’画像パス’);にすればできます。セレクタをお間違えないように。
HTML
jQuery