JointsWP4(SASS):更改Sticky中的属性

Question

TL; DR:Sticky实际上能够对我通过JavaScript提供的更改做出反应吗？如果是这样,怎么样？

(该项目使用的是Foundation 6.2和WordPress 4.4,主题使用Node.js/npm和gulp 4.0安装.我的问题详细地用粗体标记.)

我想nav使用Foundation的Sticky Plugin 使条形粘,但只有当我点击一个按钮时.这意味着当DOM全部完成时,nav条形图不应该"单独"粘贴,而是保持在文档中的顶部位置.此外,它应该在向下滚动时消失,但在向上滚动时会粘住.

该nav酒吧是正确包裹在所有需要的divS,所以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 更改为当前滚动位置.这不像我想的那样好用.到目前为止我尝试过的:

1. 当使用getElementByID然后setAttribute,data-btm-anchorPHP文件确实根据Firebug改变,但这不会影响nav条形; 它保持原样.我是否需要"重新实施"Sticky,如果是,如何？
2. 该文件提到:

使用JavaScript设置选项涉及将对象传递给构造函数,如下所示:

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

这是否意味着我可以将新参数传递给现有的插件实例？每当我传递一个新Foundation.Sticky对象时,只有一个不同的btmAnchor作为我的选项数组参数给我jQuery('#sticky_header'),没有任何反应.

3. 该文件还提出编程将粘到我的"sticky_header".如果有效,我可以尝试直接改变jQuery对象.到目前为止,我已经能够通过以下方式将Sticky插件成功绑定到我的标题:

   1. 抛出按钮获取其功能的.js assets/js/scripts(然后运行gulp)
   2. 从我的所有数据粘性标签中删除<header class="header">,因此在DOM加载完成后没有向标题注册粘性插件

   3. 以编程方式添加插件:

      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')或改变属性jQuery('.header')吗？

最重要的是,jQuery不能正常工作.我$在我的脚本中使用时遇到了很多问题,例如,我不能运行destroy()Sticky 的方法因为这个(如果它有效,我可能已经破坏了Sticky的一个实例来创建一个新的该btmAnchor集到一个新的滚动位置).我会为此打开另一个问题.

Answer 1

如果您使用 WordPress，它会自动将 JQuery 排入队列。

在 WordPress 中使用 JQuery 有两种方法。

使用 JQuery 代替 $

WordPress 以无冲突模式运行 JQuery，因此您必须使用 Jquery $

您的案例

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion(JQuery('#some-accordion'), options);

像变量一样使用 $

您也可以使用 $ 但必须定义一个变量，如下所示：

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);