<p:sticky> 在 window 调整大小时不调整大小

Question

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

如何在调整 window 大小时使 <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，或者可能带有参数）。

<p:sticky> 在 window 调整大小时不调整大小

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

jsf

primefaces

sticky

window-resize