如何在鼠標靠近頁面頂部時顯示div

我試圖獲得帶有自動隱藏（或更好的自動顯示）效果的菜單，模仿osx欄隱藏和取消隱藏的方式鼠標靠近屏幕的底部。如何在鼠標靠近頁面頂部時顯示div

就我而言，菜單位於頂部。它是一個div，定位在屏幕上（頂部：-270px），並在您向下滾動頁面達到200px時進入屏幕。這是jquery代碼（$ j是爲了與其他腳本兼容）：

$j(function($){ 
    $(window).scroll(function() { 
     var yPos = ($(window).scrollTop()); 
     if(yPos > 200) { // show sticky menu after screen has scrolled down 200px from the top  
         $('header').css("top","0").fadeIn(); 
     } else { 
         $('header').css("top","-270px"); 
     } 
    }); 
});

它完美地工作。但是，即使鼠標靠近屏幕的頂部，我也想顯示菜單（顯然我還沒有向下滾動）。

任何幫助？

來源

2013-05-07 MASSIMO DI LEO

這裏是一個很好的jsfiddle實施例 - http://jsfiddle.net/moojjoo/tneb97wk/ – Moojjoo 2016-11-03 18:03:11

下面是一個使用含有div有一個懸停目標（我已經添加了更多的色彩，使其更容易看到效果）的（更新）的方法（demo）

<div id='HoverSpace'> 
    <div id='HiddenMenu'> 
    <a href="#">Option 1</a> 
    <a href="#">Option 2</a> 
    <a href="#">Option 3</a> 
    <a href="#">Option 4</a> 
    </div> 
</div> 
<script> 
    var hoverMenu = $('#HiddenMenu'); 

    $('#HoverSpace').on('mousemove', function (event) { 
    if (35 - event.clientY < 0) { 
     hoverMenu.css({ 
      top: 35 - event.clientY 
     }); 
    } else { 
     hoverMenu.css({ 
      top: 0 
     }); 
    } 
    }).on('mouseout', function() { 
    hoverMenu.css({ 
     top: -35 
    }); 
    }); 
</script> 
<style> 
    #HiddenMenu { 
    background-color: #e00; 
    position: relative; 
    top: -35px; 
    } 
    #HoverSpace { 
    background-color: #aeaeae; 
    overflow: hidden; 
    height: 45px; 
    } 
</style>

來源

2013-05-07 17:26:20

不使用.hover我會使用.mouseover或.mouseenter – Cam 2013-05-07 17:37:40

[.hover（）]（HTTP：//api.jquery .com/hover /）簡寫爲'$（selector）.mouseenter（handlerIn）.mouseleave（handlerOut）;' – 2013-05-07 18:04:21

@Cam，我已經擴展了代碼讓你在進入菜單時開始進入revel一旦你足夠接近，就可以進入到位。 – 2013-05-07 18:23:17

你可以嘗試做到這一點（沒有測試過，也許你會需要查看隱藏的邏輯）：

$(document).mousemove(function(e){ 
    var vertical = e.pageY; 

    if(vertical <= 2 && !$('header').is(":visible")) {  
    $('header').css("top","0").fadeIn(); 
    } else { 
    $('header').css("top","-270px"); 
    } 
});

來源

2013-05-07 17:27:11 MISJHA

您需要使用.mousemove，鼠標移動可以跟蹤你的鼠標移動，你實際上可以檢測鼠標在屏幕上移動。當它向上移動時，您可以在Y軸的某個位置說出要開始顯示或隱藏的內容。

來源

2013-05-07 17:40:54 Cam

如何在鼠標靠近頁面頂部時顯示div

回答

相關問題