Facebook Application iFrame Fixed Element

Question

I would like to have a fixed element (a DIV) in the iFrame for my Facebook Application. So when the user scrolls down the page, that element is still fixed on the top of the browser window?

The basic: You add stuff to a bag, while you are scrolling down, and a fixed DIV will show you your "score" while you add these things to the bag. The "score counter" should always be visible while scrolling.

Thank you!

normal method doesn't work? http://stackoverflow.com/questions/1216114/how-can-i-make-a-div-stick-to-the-top-of-the-screen-once-its-been-scrolled-to — fingerman, Mar 28 '11 at 13:00
I have no idea? I think that it might be a problem when it's in an iFrame? — Erik Lydecker, Mar 28 '11 at 14:03

score 2 · Answer 1 · answered Apr 30 '11 at 11:42

This is not possible if you are using facebook's iframe auto-resize features. Once the iframe is resized so that scrolling is not necessary, the only scroll available will be the one of the parent window. However, the child iframe has no information about the scroll of the parent window (since they are not on the same domain...) and trying to listen to scroll events or scroll position will only return that the scrollbar is at position 0, or topmost.

You can however listen to click events and extract the offset of the click event or the clicked element.

Some examples:

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

}

Maybe you can base your interaction on this principle instead?

score 0 · Answer 2 · edited Mar 05 '13 at 15:07

I don't know about you Erik but this really doens not help me much. Could FB.Canvas.getPageInfo help?

Maybe that would help : I was ussing

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

Facebook Application iFrame Fixed Element

2 Answers2