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/

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

jQuery - 在窗口调整大小和重新运行函数时重新计算变量

1 个答案: