jQuery - пересчитать переменную при изменении размера окна и функции повторного запуска

Я написал функцию, которая скрывает и переключает 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();
});

Но не работает. Спасибо за любую помощь


toggle jquery window-resize outerheight
person djwd    schedule 12.12.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Изменить. Основываясь на ваших комментариях, я написал этот плагин, который (надеюсь) будет обладать нужными вам функциями. Если что-нибудь, вы можете извлечь некоторую информацию о том, как это сделать.

Вызовите плагин с этим --

$(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
    });
});

Вот рабочая версия скрипта - (обновлено 13 декабря) http://jsfiddle.net/jmsessink/fC8ht/5/

Я надеюсь, что это поможет и дайте мне знать, если у вас есть какие-либо вопросы.

person JSess    schedule 12.12.2012
comment
Извините, я дважды написал один и тот же код в прошлой части, сейчас я его отредактировал. Я уже попробовал его многими способами. Не работает не знаю почему. - person djwd; 12.12.2012
comment
Попробуйте так: jQuery(window).resize($.fn.myTopBar);​ - person JSess; 12.12.2012
comment
Я пробовал, но тоже не работает. Верхняя панель имеет какое-то странное поведение, она прыгает вверх и вниз, пока я изменяю размер окна, а когда я останавливаюсь, переключатель вообще больше не работает. - person djwd; 12.12.2012
comment
Что ж, логически это то, для чего он предназначен; для каждого пикселя движения при изменении размера окна функция будет срабатывать и переключать верхнее положение элемента - и поэтому переключение вперед и назад вызывает странное поведение. В таком случае, что именно вы пытаетесь сделать, потому что это может помочь мне понять, как настроить сценарий. - person JSess; 12.12.2012
comment
Ok. Я создаю отзывчивый веб-сайт с верхней липкой панелью инструментов, которая скользит вниз, когда вы нажимаете маленькую кнопку (что-то вроде центра уведомлений iOS). Все отлично работает при загрузке страницы, на мобильных и настольных компьютерах. Проблема возникает, когда я изменяю размер окна браузера, содержимое этой панели инструментов, очевидно, меняет свою высоту, поэтому панель инструментов больше не скрыта полностью. Поэтому мне нужно, чтобы отрицательное значение моего фиксированного div росло вместе с div. Уже как 10 часов бьюсь видимо глупая штука. Спасибо за вашу помощь кстати. - person djwd; 12.12.2012
comment
Хорошо, я обновлю свой ответ тем, что, как я предполагаю, вы пытаетесь сделать. То, что я написал, будет работать с вашим адаптивным дизайном. - person JSess; 13.12.2012
comment
Надеюсь это поможет? Ты шутишь, что ли?? Я потерял дар речи... почти плачу... спасибо, приятель, это работает ОТЛИЧНО. Вы на самом деле написали целый плагин для этого, я не могу в это поверить, так что это было не так просто, как я думал в конце концов. Я надеюсь, что вы не сделали это только для меня, вы должны написать статью или что-то в этом роде. Я сейчас изучаю ваш код, он чертовски полный. Еще раз спасибо, я должен вам один JSess. - person djwd; 13.12.2012
comment
Есть только одна небольшая проблема, которую я только что заметил: по какой-то причине переключатель не открывается, если я прокручиваю страницу вниз, а затем нажимаю верхнюю кнопку переключения, чтобы открыть ее. - person djwd; 13.12.2012
comment
Я отредактирую код сегодня на локальной тестовой странице с прокруткой. Я просто идиот и забыл добавить значение scrollTop в анимацию. В любом случае, это не проблема — я бы предпочел, чтобы кто-то научился чему-то из моего кода, чем просто исправлять проблемы, с которыми сталкиваются люди, чтобы публиковать их здесь. Это место было построено на идее, что это обучающий опыт для пользователей, верно? :) -- Я прокомментирую и отредактирую свой пост, когда доберусь до этого сегодня. - person JSess; 13.12.2012
comment
Хорошо, я обновил скрипт. Это был не scrollTop, как я изначально думал, а что-то еще глупое :-P Я также добавил параметр (clickOffClose: boolean), который позволяет пользователю просто щелкнуть в любом месте модального окна, чтобы закрыть его. Дайте мне знать, если у вас возникнут дополнительные проблемы или вы захотите добавить что-то в качестве функции. - person JSess; 13.12.2012
comment
Теперь работает просто отлично. Также очень хорошим дополнением является clickOffClose, хотя он не работает на сенсорных устройствах (по крайней мере, на iOS), если вы включите его, вы больше не сможете закрыть переключатель. Это всего лишь незначительная проблема, хотя я пока отключу ее. Спасибо еще раз - person djwd; 14.12.2012