jquery中的浮动菜单工具栏

Question

我尝试创建一个浮动菜单，如Aloha编辑器，但它不能正常工作。任何人都可以用jquery中浮动菜单的基本示例来帮助我。

我不寻找菜单浮动，我需要在Aloha编辑器类似的工具栏浮动

$(document).ready(function() {
            var fBox = $('#box');
              fBox.draggable();
              $(".columns").click(function(e){
                var mouseXPos = e.pageX;
                var mouseYPos = e.pageY;
                console.log("mouseXPos:"  + mouseXPos + "cleft:" +mouseYPos);
              fBox.animate({top:mouseYPos},1000);
              fBox.animate({left:mouseXPos},1000);
              });
            });

CSS

<style>
        #page{width:600px;margin:0 auto;}
        #page .columns{float:left;width:250px;}
        #box{   background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    left: 749px;
    opacity: 0.9;
    padding: 0 10px;
    position: absolute;
    top: 35px;
    width: 216px;}
        </style>

HTML

<div id="page">
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div class="columns">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </div>
            <div id="box">
                <h2>hello world</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
            </div>
        </div>

浮动工具栏http://elankeeran.com/manish/prototype/alohaEditor/示例

Answer 1

这里有一个教程：

Creating a Floating HTML Menu Using jQuery and CSS

Answer 2

我也想这么做，我找到了一个很棒的教程here！

Answer 3

您可以只使用CSS，并将菜单的样式设置为position:fixed

请注意，这在Internet Explorer6上不起作用。对于internet Explorer，您可以使用jQuery重新定位项目。使用条件标记来包含一个样式表，该样式表将您的菜单设置为position:absolute，然后在滚动窗口时使用下面截取的内容来移动div：

$(window).scroll(function() {
   $('#myElement').css('top', $(this).scrollTop() + "px");
});

请注意，scroll侦听器会触发很多次，因此您可能希望限制它，以消除任何性能问题。有关这方面的更多信息，请参阅John Resigs博客文章here。