今回はスクロール固定の方法を2つご紹介したいと思います。
CSSのみでスクロール固定したい場合はこちら
それではいってみましょう！
Menu
➀style属性を設定
style属性を効かせスクロール固定する方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //➀オフセットでTOP座標取得 let ostSampleTop = $('.sample').offset().top; //➁スクロールイベント $(window).scroll(function() { //➂ウィンドウTOP位置取得 let winTop = $(window).scrollTop(); //➃.sampleのTOP位置がスクロールTOP位置に達したらCSSを固定処理 if (winTop >= ostSampleTop) { $('.sample').css({ 'position': 'fixed', //➄fixed固定させる 'top': '1px', 'right': '1px', }); } else { $('.sample').css({ 'position': 'relative', //➅固定解除 }); } }); |
【解説】
➀.sampleのTOP座標を取得します。（固定させるセレクターのTOP位置）
➁スクロールイベントを使用してスクロールしたら実行させる処理をします。
➂スクロールTOP位置をリアルタイムで取得します。
➃スクロールして.sampleのTOPよりスクロールTOP位置が大きくなったら固定させます。
➄cssのpositionをfixedで上と右1pxに固定します。
➅➃以外は、positionをrelativeにして通常位置に戻します。
1個目の方法はこれで終了です。
➁addclassとremoveclassでCSSを切り替え固定
2個目の方法です！
CSSを作成
jQueryで2つのcssのセレクターを切り替えるので作成します。
➀.abc（通常配置）
➁.in（固定）
1 2 3 4 5 6 7 8 9 10 11 12 | <style type="text/css"> .abc{ color: red; } .in{ position: fixed; top: 0px; left: 50px; color: blue; z-index: 50; } </style> |
・position : 位置を固定（fixed）
・topとleft : 画面の表示位置で、上部0pxで左から50pxの位置に表示
・z-index : 要素の重なり位置（数字が高いと上の階層になります）
ですので.inが固定する処理になります。
jQueryでCSSを切り替え
cssで.abcと.inを2つ作成したので、これをjQueryで切り替えます。
①offsetメソッドで.abcのTOP位置（数値）を変数に格納します。
②スクロールして.abcのTOP位置より、スクロールTOP位置が大きくなったらaddClassで.inを追加します。（固定）
③それ以外はremoveClassで.inを削除します。（通常配置）
【サンプルコード】
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> $(function() { var ost = $('.abc').offset(); //① $(window).scroll(function() { if ($(window).scrollTop() > ost.top) { $('.abc').addClass('in'); //② } else { $('.abc').removeClass('in'); //③ } }); }); </script> |
スクロールさせると、ifにより2つのcssが切り替わるので、固定したり通常配置になったりします。
全サンプルコード（addClassとremoveClass）
全てコピペで試せます(*^^)v
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery-1.8.3.js"></script> <title>scrollFixed</title> <style type="text/css"> .abc { color: red; } .in { position: fixed; top: 0px; left: 50px; color: blue; z-index: 50; } </style> </head> <body> <script> $(function() { var ost = $('.abc').offset(); $(window).scroll(function() { if ($(window).scrollTop() > ost.top) { $('.abc').addClass('in'); } else { $('.abc').removeClass('in'); } }); }); </script> <h1>1</h1> <h1>1</h1> <h1>1</h1> <div class="abc"> <ul> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> <li>メニュー</li> </ul> </div> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> <p>22</p> <p>23</p> <p>24</p> <p>25</p> <p>26</p> <p>27</p> <p>28</p> <p>29</p> <p>30</p> </body> </html> |
まとめ
今回はスクロールして固定表示させるやり方の基本を解説しました。
以上です(*ﾟ▽ﾟ)ﾉ
