如何获得AJAX的顶部菜单的计算器有？ [英] How do I get the AJAX top menu that StackOverflow has?

问题描述

您知道，弹出当你的网站，你可以点击X的权利将其删除菜单。什么技术是这个（我假设AJAX），什么条件，我需要寻找使用呢？

You know, the menu that pops up when you get to the site and you can click the 'x' to the right to remove it. What technology is this (I assume AJAX) and what terms do I need to search for to use this?

推荐答案

下面是的 code 以用jQuery做。

Here is the code to do it with 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的）：

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");
});

您可以看到href="http://roshanbh.com.np/examples/floating-message-jquery/"这里 rel="nofollow">现场演示一个

You can see a Live Demo here.

结果：

这篇关于如何获得AJAX的顶部菜单的计算器有？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！