ナビ部分は固定されていてコンテンツ部分だけが切り替わっていく。かつurlもきちんと変更されている。 そんなサイトをご覧になったことはありますでしょうか。 今回は『pjax』を使ってそんなサイトを制作する方法をご紹介します。 具体的な要件は以下の通りです。 軽量なプラグイン『Barba.js』を使ってpjax対応をする jQueryを使ってページ遷移時にアニメーション(フェード)をつける ページ遷移時にurlが変更される ナビゲーション部分を固定してコンテンツ部分だけが変わっていく まずは以下のリンクからデモをご覧ください。 jQueryとBarba.jsでpjax対応サイトを実装するdemo ヘッダー(背景が白い部分)は固定されており、リンクをクリックするとコンテンツ部分(背景がグラデーションの部分)のみがフェードで切り替わる。 合わせてurlも変更されていることをご確認いただけましたでし