Question

我们希望在我们的facebook canvas应用程序中使用一个流畅的画布大小修复一个具有位置的锚DOM元素。因为应用程序在画布iframe中运行，所以css position：fixed的简单用法不起作用：iframe内容没有从周围的facebook页面看到任何滚动事件。

解决这个问题的第一种方法是ping facebook api并获得滚动位置。所以我们将它放入$（document）.ready（）：

# refresh position of feedback button to simulate position:fixed in iframe
refresh_timer = 1000
move_button = () ->
  # get scroll position from facebook
  FB.Canvas.getPageInfo (info)->
    # animate button to new position with an offset of 250px
    $('#fdbk_tab').animate({top: info.scrollTop+250}, 100)
# start interval to do the refresh
setInterval(move_button, refresh_timer)

一般来说这确实有用。但是，当触发对facebook api的调用时，浏览器重新加载按钮和鼠标光标会闪烁，从而导致用户体验不佳。

有关如何改进此方法或其他方式来实现/模仿位置的任何建议：在iframe中修复，我们非常感谢！

Answer 1

我怀疑它与您如何设置应用HTML布局有关。我在我的测试应用程序中进行了快速测试，但它确实有用。文档的正文只包含一个具有绝对定位的div，其中包含一个位置为fixed的锚点div和一些单词，因此您可以看到滚动。代码如下所示：

<body>
<div style="width: 300px; height: 2000px; position: absolute; top: 0; background-color: yellow;">
    <a href="www.google.com">
        <div style="width: 60px; height: 20px; background-color: #000; position: fixed; top: 20px;">
            ANCHOR
        </div>
        1words<br/>
        1words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        2words<br/><br/><br/><br/>
        2words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        3words<br/><br/><br/><br/>
        3words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        4words<br/><br/><br/><br/>
        4words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/><br/><br/><br/>
    </a>
</div>

您可以看到工作中的示例here（我刚刚删除了国家/地区限制，如果由于任何原因您无法访问该应用，请告诉我，我会再次检查设置。）

Answer 2

只是总结第一个答案的评论：Rorok_89建议的方法实际上并不适用于问题中描述的确切用例。只有在iframe上启用了溢出时，它才有效。

我不知道有什么方法可以解决OP提出的问题。

位置：在facebook canvas（iframe）中修复

2 个答案: