本日は画面スクロールをした際の絵文字固定のサンプルだけです。
【完成後】
スクロールして画面に絵文字が固定表示できるようになります。
作成手順
手順
・offsetメソッドで取得したいの絵文字のTOP座標を取得します（JavaScript）
・ifでaddclasssとremoveclassを使用してCSSを切り替えます。（JQuery）
・一番下に絵文字を自動挿入させる処理をします。insertAfter（JQuery）
・CSSで固定と通常配置のセレクターを作成します。（CSS）
・CSSで絵文字を疑似要素biforeで挿入させます。（CSS）
サンプルコード
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 | <!DOCTYPE html> <html lang="jn"> <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>絵文字固定</title> <style> li { list-style: none; font-size: 10px; } /* 位置指定して固定表示 */ .last_li.add { position: fixed; top: 0px; left: 40px; } /* 疑似要素beforを使用して絵文字を挿入 */ .last_li.add p:before { content: "＼(^^)／"; /*➀*/ } /* 疑似要素beforを使用して文字空白処理 */ .last_li p:before { content: ""; /*➁*/ } </style> </head> <body> <div class="sample"> <ul> <script> for (let i = 1; i < 11; i++) { //liのサイドメニューーを作成 document.write('<li>サンプルサイドバー' + i + '</li>'); } </script> <li>(((^-^)))</li> </ul> </div> <!--divタグを挿入して画面切り替え --> <script> $(function() { $('<div class = "last_li"><p></p></div>').insertAfter('.sample'); $(window).scroll(function() { //➀ let ofst = $('.sample li:last-child').offset(); //➁ if ($(window).scrollTop() > ofst.top) { //➂ $('.last_li').addClass('add'); //➃ } else if ($(window).scrollTop() < ofst.top) { //➄ $('.last_li').removeClass('add'); //➅ } }); }); </script> <!-- スクロールできるように空白を作成 --> <script> for (let i = 0; i < 100; i++) { document.write('<p> </p>'); } </script> </body> </html> |
まとめ
前回実施したスクロールでメニューを表示と基本的にやり方は一緒ですが、今回は文字や絵文字を挿入するということでCSSの疑似要素を使用してみました。
以上です。
