jQuery的 - 重新计算变量的窗口大小调整和重新运行功能

Question

我写了一个隐藏功能和切换顶栏的div：

jQuery(document).ready(function($) { 

     $.fn.myTopBar = function() { 

       var sipPosTop = 0; 
       var topDivHeight = $("#top").outerHeight(); 

       $('#top').css('top' , -topDivHeight+10).show().animate({top: '+=0'}, 2000); 


       $("#top-toggle").click(function(e) { 
        e.preventDefault(); 
        $("#top").animate({ top: sipPosTop }, 200, 'linear', function() { 
         if(sipPosTop == 0) { sipPosTop = -topDivHeight+10; } 
         else { sipPosTop = 0; } 
        }); 
       }); 
     }; 
}); 

作品在页面加载不错，但对窗口调整#top返回DIV高度改变，并打破布局。我如何重新计算并重新运行窗口调整大小的功能？我试过以下内容：

jQuery(document).ready(function($){ 
    $.fn.myTopBar(); 
}); 

jQuery(window).resize(function($){ 
    $.fn.myTopBar(); 
}); 

但是不起作用。感谢您的任何帮助

Answer 1

编辑 - 根据您的意见，我写了这个插件（希望）会有你正在寻找的功能。如果任何东西，您可能能够提取一些关于如何去做的信息。

调用这个插件 -

$(function() { 
    $('.someFlyoutContainerClass').flyout({ 
     flyButton : $('.someButtonClass'), // button that toggles the flyout 
     topOffset : 50, // (px) offset from the top of the window 
     fade : { // (fade speeds/durations) -- remove object if not needed 
      inSpeed : 350, 
      easingIn : 'swing', // by removing easing, it will default to linear 
      outSpeed: 250, 
      easingOut : 'swing'    
     }, 
     slide : { // (slide speeds/durations) -- remove object if not needed 
      inSpeed : 350, 
      easingIn : 'swing', 
      outSpeed : 250, 
      easingOut : 'swing'  
     }, 
     closeButton : $('.close-flyout'), // you may remove if not needed 
     clickOffClose: true // click anywhere but modal/flyout to close it 
    }); 
}); 

这里是脚本的一个工作版本 - （更新12/13） http://jsfiddle.net/jmsessink/fC8ht/5/

我希望这可以帮助，让我知道，如果你有任何问题。