jsf - <p :sticky> doesn't resize on window resize

Question

我正在使用 <p:sticky> 有菜单。我的问题是，调整窗口大小时它不会调整大小。

我怎样才能制作<p:sticky>调整窗口大小时也调整大小？

Answer 1

好的，正如我在上面的评论中所说，问题是 Primefaces 在初始化时只计算一次目标的宽度。此后，它是一个不会改变的固定数字。

所以我们要做的就是重新初始化组件。我已经在 Primefaces Showcase page 上尝试过了.

下面的客户端 Javascript 几乎可以解决这个问题:

foo = PF('widget_j_idt93');
foo.init(foo.cfg);

(此处“widget_j_idt93”是 Primefaces 组件的 widgetVar。根据需要替换您自己的。)

缺少的是 Primefaces(非常正确)认为小部件已经已初始化。为了取消初始化小部件，我们可以首先删除所有元素样式:

$("#tb").attr("style","")

(其中“#tb”是目标的选择器，即您的菜单。)

因此，如果您创建一个首先删除样式然后重置小部件的函数，它应该可以工作。

编辑:After looking at the client-side code of the Sticky component我想到了。您必须在清空和初始化之前进行恢复，然后必须显式运行粘性或不粘性调用。 所以这应该是解决方案:

fixSticky = function() {
    var bla=PF('widget_j_idt93');
    bla.restore();
    bla.target.attr("style","");
    bla.init(bla.cfg);
    if($(window).scrollTop() > bla.initialState.top) {bla.fix();} else {bla.restore();}
}

每当页面大小调整时，只需运行此函数(修改为您自己的 widgetVar，或者可能使用参数)。