javascript - 关节 WP4 (SASS) : Changing Properties in Sticky

Question

TL;DR:Sticky 实际上能够对我通过 JavaScript 提供的更改使用react吗？如果是，怎么做？

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

我想制作 nav bar sticky 使用 Foundation 的 Sticky 插件，但只有当我点击一个按钮时。这意味着当 DOM 全部完成时，nav bar 不应该“单独存在”，而是留在文档中的顶部位置。 此外，它应该在向下滚动时消失，但在向上滚动时保持不变。

nav bar 已正确包装在所有必需的 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 滚动到当前滚动位置。这没有我想要的那么好用。到目前为止我尝试了什么:

1. 使用 getElementByID 时然后 setAttribute , data-btm-anchor PHP 文件中的内容确实会根据 Firebug 进行更改，但这不会影响 nav酒吧一点；它留在原处。 我是否需要“重新实例化”Sticky，如果需要，如何实现？
2. docs提及:

Setting options with JavaScript involves passing an object into the constructor function, like this:

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

这是否意味着我可以将新参数传递给一个已经存在的插件实例？每当我传递一个新的 Foundation.Sticky 时对象只不过是一个不同的 btmAchor 作为我的 jQuery('#sticky_header') 的选项数组参数，什么都没发生。

1. docs还建议以编程方式将 Sticky 添加到我的“sticky_header”。如果可行，我可以尝试直接更改 jQuery 对象。到目前为止，我已经能够通过以下方式成功地将 Sticky 插件绑定(bind)到我的 header :

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

   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

你可以在你的 scss 中使用 sticky css 属性。

在 html 或 php 中向您的组件添加类:

<div data-sticky-container class="sticky-container">

在 scss 或 css 中:

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10; 
}

现在只需输入您需要的距顶部的距离!