JQuery: плавающая панель инструментов внизу страницы в теме WebSphere Portal 7 - PullRequest
Новая
       48

JQuery: плавающая панель инструментов внизу страницы в теме WebSphere Portal 7

0 голосов
/ 10 февраля 2012

Я занимаюсь разработкой собственной темы на основе PageBuilder2 (csa2.theme) для WebSphere Portal 7. Я использую JQuery 1.7.1. Одним из требований является наличие нижнего колонтитула (идентификатор div#footer) и справочной панели (класс div.footer.flotante), которая находится в верхней части нижнего колонтитула, когда нижний колонтитул находится в области просмотра, но он должен плавать в нижней части окна, пока нижний колонтитул отсутствует в окне просмотра ... вроде новой панели инструментов временной шкалы Facebook (добавьте в друзья и т. д.) или виджете социальной сети Mashable, только снизу.

Scheme of what I want to do

Ниже приведен фрагмент того, что я сделал с JQuery, чтобы получить это: 

$(window).scroll(function (event) {
    var barra = $('div.footer.flotante');
    var offset = barra.offset();
    var bh = barra.height();
    var h =  offset.top;
    var wh = $(window).height();

    var dh = $(document).height();
    var y = $(this).scrollTop();
    var x = dh - y - wh;
    var hf = $("div#footer").height();

    if (x > hf) {
        barra.addClass('fixed');
    } else {
        barra.removeClass('fixed');
    }
});

Это стили CSS, которые я использую: 

div.footer.flotante{
    background:url(../images/footerone.png) repeat-x;
    width:100%;
}
div.footer.flotante.fixed{
    position: fixed;
    bottom: 0px;
    z-index: 1;
}

С этим кодом я получил плавающую панель инструментов в случае html-страницы со статическим содержимым (поэтому значение dh является постоянным). Моя проблема заключается в том, что, поскольку это разработка темы, ожидается, что содержимое будет динамически загружаться в основной текст документа, увеличивая значение dh до неизвестного количества пикселей. В этом сценарии для вычисления значения x принимается начальное значение dh, в результате чего получается плавающая панель инструментов с неправильным расположением.

  1. Как я могу пересчитать значение dh после рендеринга этого контента?
  2. Учитывая, что такого свойства, называемого offset().bottom, нет, существует ли способ временно перевернуть документ вверх дном, чтобы вычислить значение offset().top для моей панели инструментов, что устраняет необходимость знать окончательное значение dh
  3. У вас есть другое предложение сделать то, что я пытаюсь?

Заранее спасибо.

1 Ответ

1 голос
/ 17 февраля 2012

Я нашел причину проблемы: это было абсолютно позиционированное изображение для логотипа с отрицательным атрибутом дна, что создавало дополнительный вертикальный интервал ниже нижнего колонтитула и увеличивало значение dh.

...