16:59【jQuery】コピペでOK!スクロールで固定、解除されるBOXを配置する方法:黒ブタこんばんは、黒ブタです。最近のサイトで使われている技術ですが、今回はスクロールすると開始するイベントを紹介したいと思います。サイドバーやヘッダーのナビでよく見かけますね。いったものかと言いますと、Facebookのサイドなどでスクロールすると固定されるBOXと言えばわかると思います。特定の位置までスクロールするとサイドにあるボックスが固定され、さらにスクロールして一定の位置に到達すると解除されるアレです。コードを書いていきます。・・・の前にDEMOを作ったので見てみましょう。※DEMOはPCで見た場合のみでスマホ用には整えていません。レスポンシブ対応にはしていますが、Android4.2以下はcssのflexに対応していないので、現在はAndroidの為にもflexを使っている要素はスマホで読み込みCSSを変更してリストで並べるように対策しましょう。Queries(メディアクエリ)等を利用し、使い分けましょう。対策するか・・・・Androidのバージョンが4.2以上に移行したのはまだまだ最近(2年以内)で、4.2以下のバージョンのAndroid携帯を使っている方が沢山いる。最低でも基本の2年買い替えを考えて、余裕を持って3年は対策しましょう。DEMO今回はナビをトップから150pxスクロールで固定に、1000pxスクロールで固定を解除するというプログラムです。navでは無く、div要素でもなんでも可能です。準備として必要なのはheadにJQueryとreset.cssを読み込んでおいてください。src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>さて、コードを書いていきます。class="clearfix"><p>footer</p></footer></body>続いてCSSCSSは少ないのでheadに書き込みます。text-align:center;}</style>最後にjQueryを書き込み。これも量が少ないのでhtmlのheadに書き込みます。{//TOPからの位置が(スクロール量が)ヘッダーの高さ(今回は150px)以下または1000px以上だとfixedクラスを削除$('nav').removeClass('fixed');}});});});</script>以上でスクロールで固定、解除されるBOXの設置ができました。DEMOページも用意してるので確認してください。DEMOまだまだ改良が沢山出来そうなのでちょこちょこ変更していきます。黒ブタBLOG.MENU。