TL; DR:Sticky实际上能够对我通过JavaScript所做的更改做出反应吗?如果是这样,怎么办?
(该项目使用Foundation 6.2和WordPress 4.4,主题使用Node.js / npm和gulp 4.0安装。我的问题,用粗体显示。)
我想nav
使用Foundation的Sticky Plugin 来使栏保持粘性,但是仅当我单击按钮时才如此。这意味着当DOM全部完成后,nav
竖条不应“单独”粘贴,而应停留在文档的顶部。此外,它在向下滚动时应消失,而在向上滚动时则保持不变。
该nav
酒吧是正确包裹在所有需要的div
S,所以nav
酒吧是能够坚持。“额外”部分会出现问题。我的想法是首先使用PHP实例化Sticky:
<div data-sticky-container>
<header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1"
data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
<?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
</header>
</div>
之后,data-btm-anchor
使用点击时触发的JavaScript 将更改为当前滚动位置。这没有我想要的那样好。到目前为止,我已经尝试过:
- 当使用
getElementByID
then时setAttribute
,data-btm-anchor
PHP文件中的确实会根据Firebug进行更改,但这一点不会影响标准nav
。它留在原地。我是否需要“重新实例化” Sticky,如果需要,怎么做? - 该文档提到:
使用JavaScript设置选项涉及将一个对象传递到构造函数中,如下所示:
var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion($('#some-accordion'), options);
这是否意味着我可以将新参数传递给已经存在的插件实例?每当我传递一个新的Foundation.Sticky
对象时,仅将btmAnchor作为一个不同的btmAnchor作为我的options数组参数jQuery('#sticky_header')
,就什么也没有发生。
该文档还建议以编程方式将Sticky添加到我的“ sticky_header”中。如果可行,我可以尝试直接更改jQuery对象。到目前为止,我已经能够通过以下方式将Sticky插件成功绑定到我的标头:
- 将按钮从中获取其功能的.js放入
assets/js/scripts
(然后运行gulp
) - 删除my中的所有数据粘性标签
<header class="header">
,因此在DOM完成加载后,没有在标题中注册任何粘性插件 以编程方式添加插件:
function button_fire(){ var options = { topAnchor:"1", btmAnchor:"footer:top", marginTop:"1" }; var stick = new Foundation.Sticky(jQuery('.header'), options); }
根据Firebug,标头现在获得了“粘性”类。但是它仍然不起作用-而是出现了小故障:“标题空间”有些塌缩,因此略微覆盖了
div
下面的“内容” 。您知道什么,标题不粘。那是个错误吗?假设它现在可以“出色地”工作,理论上我是否可以通过取消引用
var stick
或使用jQuery('#sticky_header')
or 来更改属性jQuery('.header')
?- 将按钮从中获取其功能的.js放入
最重要的是,jQuery无法正常工作。我$
在脚本中使用时遇到很多问题,例如,destroy()
由于这个原因,我无法运行Sticky方法(如果可行,我可能已经破坏了Sticky实例以使用该btmAnchor
集到一个新的滚动位置)。我将为此提出另一个问题。
var $ = jQuery
或者像这样调用.ready()方法来传递它:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
wp_enqueue_script( 'jquery' );
不幸的是,问题仍然与以前相同。还是我错误地将jQuery排入队列?JointsWP是否有自己的jQuery库?