jQuery 表示位置による吹き出しの上下切り替え

マウスオーバー時に位置が画面下端の場合はバルーンを上に表示

HTMLはjQuery版と同じ。

jQuery

$(function () { $('span').hover(function(e) { // 100はメニューとバルーンの高さ if ($(window).scrollTop() + $(window).height() > $(this).offset().top + 100) { // バルーンを上に表示 $(this).next('p').removeClass('down').addClass('up').show(); } else { // バルーンを下に表示 $(this).next('p').removeClass('up').addClass('down').show(); } }, function(){ $(this).next('p').hide(); }); });

バルーンだけでなく、ドロップダウンでも流用可。

CSS

#menu div { position: relative; } .arrow_box { display: none; position: absolute; left: 8px; padding: 16px; background: #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #fff; } .up { top: 32px; } .down { bottom: 32px; } .arrow_box:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(51, 51, 51, 0); border-width: 10px; left: 50%; margin-left: -10px; } .down:after { top: 100%; border-top-color: #333; } .up:after { bottom: 100%; border-bottom-color: #333; }

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について