jQuery– category –

ページの一番上にヘッダーやナビゲーションを固定する場合、ページ内アンカーリンクがずれる問題 cssで固定の分の調整をする .link-margin { margin-top:　-100px; padding-top:　100px; } スムーススクロールとヘッダー固定の調整のJavaScriptを書く $(fu...

ウィンドウズサイズに合わせてjQueryを使いたい場合はcssのようにブレイクポイントを使って切り替えられます。   if (window.matchMedia( "(max-width: 640px)" ).matches) { /* ウィンドウサイズが 640px以下の場合のコード */ } else { /* ウィンド...

ディレクターが大好きなページ内リンク。 制作の私から見ると見辛いし… ちょっとし調整も必要になるしで大嫌いです。   HTML <a href="#" id="panel-btn" class="pc-none"><span id="panel-btn-icon"></span></a> <div id...

WordPressなどのブログのアイキャッチ使用時の画像のサイズ調整に便利なのがobject-fit。 しかし、IE非対応です。 そのため、object-fitを使うとIEでは画像が変形してしまいます。 最新のEdgeは対応済みのようで崩れませんでした。 根強いIEユーザーのため...

//spメニュー $(function() { $("#panel-btn").click(function() { $("#panel").fadeToggle(500); $("#panel-btn-icon").toggleClass("close"); return false; }); $('.global-nav li a').on('click', function(){ $('#panel-btn').click(); }); });  

■GitHubでダウンロード https://github.com/cferdinandi/smooth-scroll   html <script src="js/smooth-scroll.polyfills.min.js"></script>   js <script> var scroll = new SmoothScroll('a[href*="#"]'); <script> &...

ページ内のアンカーリンクだと問題ありませんが、別ページからのアンカーリンクだと、アンカーの場所がおかしくなってしまうことがあります。 これは、スライダーで使っているjQueryやcssが読み込まれる前にアンカーリンクが着地するためです。 先にロード...

せっかくjQueryで動きを付けても、ページの表示と同時に実行されてしまうと、目につかない場合があります。 見せたい位置までスクロールしたら実行してあげましょう。   【簡単です！】 動かしたい位置のタグにクラス名やid名を付けて「セレクタ」に...

レスポンシブでホームページを作るとき、ウィンドウサイズによってcssを切り替えます。 jQueryも変えたい時ってありますよね。   ウィンドウサイズによってjQueryを切り替えたい時は下記のコードを。   //ウインドウサイズの横幅によって条件分...

ヘッダーを固定しているサイトで面倒くさいのがアンカーリンク。 ページ内でもページ外でも... ヘッダー固定している分すれてしまいます。   【そんな時はアンカーリンクをしているページにこちらのコードを。】 ※ヘッダー固定が120pxの場合。 $(wind...