我们想在Facebook Canvas应用中使用一个带有position:fixed属性的锚DOM元素,并且具有流动画布大小。因为应用程序在Canvas iframe中运行,所以简单地使用css position:fixed无法正常工作:iframe内容无法看到来自周围Facebook页面的任何滚动事件。
解决这个问题的第一种方法是调用Facebook API并获取滚动位置。因此我们将其放入$(document).ready()中:
解决这个问题的第一种方法是调用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中实现/模拟position:fixed的方式,非常感谢您的建议!