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;
}
サンプル
