GWT实现“跟随标题栏”

　　在一些商城或者博客上，随处可见一些“跟随的标题栏”，什么是”跟随的标题栏“呢？它的效果是当浏览器窗口移到看不见某处内容的时候，这块内容的标题会紧贴在浏览器顶部，跟随浏览器滑动，当用户将浏览器内容往上拖动的时候，这个标题又会自动还原。例如淘宝的顶部搜索栏如下。

这种方法在GWT也可以实现，最近做了一个测试，发现效果一样，特说下思路，贴出代码，以作后用。

思路：

GWT的界面上提供了一个方法，名为：Window.addWindowScrollHandler(Handler handler),该方法可以监视窗口的拖动。在这个方法里，我们可以进行我们想要的操作。

关于怎么“浮出”这个标题，我首先想到是的使用PopPanel实现，它可以实现精确的定位，但要在其中显示和要浮动的标题一样的控件，必须得先有这个控件才行，但GWT中不允许一个布局控件多次引用。所以在此我用的是一种“障眼法”，创建两个一样的标题控件，将其中一个放在PopPanel中即可。

总体实现方法是这样的：在窗体滑动事件中，根据我们设置的条件，滑到某个程度的时候，弹出一个PopPanel，其中的内容和要“浮动”标题一样，但回到某个地方，将该PopPanel隐藏即可。

代码如下：

Window.addWindowScrollHandler(new Window.ScrollHandler() {
               public void onWindowScroll(Window.ScrollEvent event) {
                   int topDistance = View1.getAbsoluteTop();
                   int left = View1.getAbsoluteLeft();
                   floatPanel.setWidget(View2);
                   int w = Window.getScrollTop();
                   floatPanel.setPopupPosition(left, w);
                   if(event.getScrollTop()>topDistance){
                       floatPanel.show();
                   }else{
                       floatPanel.hide();
                   }
               }
            });

　　上述代码中的View1和View2其实是两个相同的控件。第三行中有一个getAbsoulutTop()方法，是获取该控件在浏览器中离浏览器顶部的距离。所以在第8行中我们就可以判断，在窗体滑动高度大于该控件里窗体的高度的时候，就将该floatPanel显示出来，否则隐藏。关于PopPanel,它必须拥有坐标，即在浏览器中的位置坐标。高度我们可以使用Window.getScrollTop(),即滑动条的高度，所以一直是在浏览器顶部的。关于离浏览器左边的距离，我们可以在窗体中获取一个相对位置，要想实现PopPanel在隐藏和显示和原控件重叠，最好的办法就是将原控件作为相对位置，所以浮动Panel距离浏览器左边的距离就是原控件距离浏览器左边的距离。
　　补充一点：在浏览器是可以改变大小的，这个原控件的位置可能会改变，floatPanel也应该要改变其X坐标才合理，因为一旦浏览器再放大或缩小窗口，floatPanel还会是原来的位置，造成位置偏移。幸好，GWT还提供了一个方法：

Window.addResizeHandler(new ResizeHandler() {
   @Override
   public void onResize(ResizeEvent event) {
    //method here
   }
  });

该方法将监视浏览器缩放情况，一旦浏览器缩放了，就会触发事件。所以把两者结合起来，可以实现：但浏览器缩放的时候，重新获取原控件的X左标，并跟着立即改变PopPanel的X坐标，这样就不会出现缩放浏览器“浮动标题”移位了。