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

编辑 -- 根据您的 cmets，我编写了这个插件，（希望）将具有您正在寻找的功能。如果有任何事情，您也许可以提取一些关于如何去做的信息。

用这个调用插件 --

$(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/

我希望这会有所帮助，如果您有任何问题，请告诉我。