如何獲得StackOverflow的AJAX頂層菜單？

Question

您知道，當您訪問網站時彈出菜單，您可以單擊右側的「x」將其刪除。這是什麼技術（我假設AJAX）以及我需要搜索哪些條款才能使用它？

Answer 1

這是code與JQuery做到這一點。

HTML：

<div id="message_box"> 
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" /> 
    The floating message goes here 
</div> 

<div> 
    .............. 
    other content goes here 
    .................. 
</div> 

CSS：

#message_box { 
position: absolute; 
top: 0; left: 0; 
z-index: 10; 
background:#ffc; 
padding:5px; 
border:1px solid #CCCCCC; 
text-align:center; 
font-weight:bold; 
width:99%; 
} 

的JQuery（JavaScript的）：

$(window).scroll(function() 
{ 
    $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); 
}); 

//when the close button at right corner of the message box is clicked 
$('#close_message').click(function() 
{ 
    //the messagebox gets scrool down with top property and gets hidden with zero opacity 
    $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow"); 
}); 

你可以看到一個Live Demo here。

結果：

alt text http://clip2net.com/clip/m12122/1247620668-clip-5kb.png

Answer 2

調查jQuery。

請注意，如果您沒有啓用腳本，那麼該框實際上是靜態的，所以它不是AJAX，只是DOM腳本。

Answer 3

我知道它是通過jQuery實現的，但我不確定他們使用了哪個插件或者它是如何配置的。