Приложение Facebook Фиксированный элемент iFrame

Question

Я хотел бы иметь фиксированный элемент (DIV) в iFrame для моего приложения Facebook. Поэтому, когда пользователь прокручивает страницу вниз, этот элемент все еще фиксируется в верхней части окна браузера?

Основное: вы добавляете вещи в сумку во время прокрутки вниз, и фиксированный DIV покажет вам ваш «счет», пока вы добавляете эти вещи в сумку. «Счетчик очков» всегда должен быть виден при прокрутке.

Спасибо!

Answer 1

Это невозможно, если вы используете функции автоматического изменения размера iframe в Facebook. Как только размер фрейма будет изменен, чтобы прокрутка не была необходима, единственной доступной прокруткой будет прокрутка родительского окна. Однако дочерний iframe не имеет информации о прокрутке родительского окна (поскольку они не находятся в одном домене ...), и при попытке прослушивания событий прокрутки или позиции прокрутки будет возвращено только то, что полоса прокрутки находится в позиции 0, или верхний.

Однако вы можете прослушивать события щелчка и извлекать смещение события щелчка или элемента, по которому щелкнули.

Некоторые примеры:

$('.clickme').click(function(e) {

    e.preventDefault();

    var top;

    // Using click position (e.pageY and e.pageX available)
    top = e.pageY;

    // Using clicked element position
    top = $(this).offset().top;

    $('#moveme').css({'top': top - 100 + 'px'}); //

}

Может быть, вместо этого вы можете основывать свое взаимодействие на этом принципе?

Answer 2

Я не знаю о тебе, Эрик, но это действительно не очень мне помогает. Может ли помочь FB.Canvas.getPageInfo?

Может быть, это поможет: я использовал

(function() {
    var el = $("header:first");
    var elpos_original = el.offset().top;
    $(window).scroll(function(){
        var elpos = el.offset().top;
        var windowpos = $(window).scrollTop();
        var finaldestination = windowpos;
        if(windowpos<elpos_original) {
            finaldestination = elpos_original;
            el.stop().css({'top':0});
        } else {
            el.stop().animate({'top':finaldestination-elpos_original},0);
        }
    });
})();