「効果」が何と呼ばれるかわからないので、私はヘッダーについて持っているアイデアでレンガの壁にぶつかっています。何度も見てきましたが。
私の考えは、ユーザーが画面の上部にカーソルを置くとドロップダウンする非表示のヘッダーを作成することです。画面の隅にカーソルを置いたときに表示されるWindows8メニューに似ています。
誰かが私を正しい方向に向けることができれば、私はそれをいただければ幸いです。
私はこのようなことをします:http://jsfiddle.net/V9Cfn/2/
$(window).on('mousemove', function (e) {
if (e.pageY < 100) {
$("#showtop").slideDown();
}
else {
$("#showtop").slideUp();
}
});
基本的に、マウスが上部に十分近い場合は、問題のdivを上部に固定したことを示します。
(またはanimate()
を使用して)divを下にスライドする代わりに、を使用できます。これにより、実際にはdiv全体が移動します。slideDown
slideToggle
<div class="wrapper">
<div class="header">
Shazam!
</div>
<div class="trigger">
</div>
</div>
$(function(){
$(".trigger").mouseenter(function(){
$('.header').animate({
top: '0px',
}, 500, function() {
});
}).mouseleave(function(){
$('.header').animate({
top: '-20px',
}, 500, function() {
});
});
});
.wrapper {position:relative;}
.header {background-color: #F00; position:absolute; height: 20px; width: 100%; top: -20px; left: 0px;}
.trigger {height: 50px; width: 100%; border: 1px solid #EFEFEF;}