JointsWP4 (SASS)：在 Sticky 中更改属性

Posted 2023-02-19

【中文标题】JointsWP4 (SASS)：在 Sticky 中更改属性

【英文标题】：JointsWP4 (SASS): Changing Properties in Sticky

【发布时间】：2016-06-11 11:51:42

【问题描述】：

TL;DR：Sticky 真的能够对我通过 JavaScript 提供的更改做出反应吗？如果有，怎么做？

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

我想使用 Foundation 的 Sticky Plugin 使 nav 栏保持粘性，但仅当我单击按钮时。这意味着当 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>

之后，使用点击时触发的 javascript 将 data-btm-anchor 更改为当前滚动位置。这并没有我想要的那么好。到目前为止我尝试过的：

当使用getElementByID 然后setAttribute 时，PHP 文件中的data-btm-anchor 确实会根据Firebug 发生变化，但这不会对nav 栏产生一点影响；它停留在原处。 我是否需要“重新实例化”Sticky，如果需要，如何？ docs提及：

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

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

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

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

将按钮从中获取其功能的 .js 放入 assets/js/scripts（然后运行 ​​gulp） 从我的<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') 或 jQuery('.header') 来更改属性？

最重要的是，jQuery 不能正常工作。我在脚本中使用 $ 时遇到了很多问题，例如，我无法运行 Sticky 的 destroy() 方法（如果它有效，我可能已经销毁了一个 Sticky 实例以创建一个新实例，并将 btmAnchor 设置为新的滚动位置）。我将为此提出另一个问题。

【问题讨论】：

在搜索时，实际上并没有 wp_enqueue_script() 函数调用显式地将 jQuery 加入队列，所以现在我通过在 assets/functions/enqueue-scripts.php 中编写来做到这一点：wp_enqueue_script( 'jquery' ); 仍然是同样的问题不幸的是，和以前一样。还是我错误地将 jQuery 排入队列？ JointsWP 有自己的一些 jQuery 库吗？

WordPress 自动将 jQuery 入队，无需自己入队。此外，“jQuery”是正确的 - 但 $ 应该仍然有效。 WordPress 在无冲突模式下运行 jQuery，这就是为什么使用“jQuery”而不是 $。

那么这是否意味着编写“jQuery”而不是“$”是首选方式，并且应该以相同的方式工作？ （我是 jQuery 新手）（另外，JointsWP 上的工作很棒，Jeremy！:) 绝对喜欢它。）

@SamuelLOLHackson，您也可以在 WordPress 中使用“$”，但是，您必须像这样专门为它分配 jQuery：var $ = jQuery，或者在调用 .ready() 方法时传递它，例如这个：jQuery(document).ready(function($) //your code here with using $ or jQuery );

我很惊讶，我有一个问题，留下500悬赏回答，并得出真实完整的答案，这个问题是2年前的，没有悬赏。谢谢你的好意。

【参考方案1】：

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

在 html 或 php 中为您的组件添加类：

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

在 scss 或 css 中：

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

现在只需设置您需要的与顶部的距离！

【参考方案2】：

更喜欢完全使用 jquery 来控制粘性。

$(document).ready(function()
    $('<Your button>').click(function () 
        $('html, body').animate(scrollTop: $('<where you want to go>').offset().top, 1000);
    );

使用此按钮，您可以让一个按钮滚动到您网站的任何部分。

对于粘性，您只想在滚动超过第一部分时添加粘性类：

$(document).ready(function()
    $(<Section name after which you want sticky to appear>).waypoint(function(direction)
        if (direction == "down")
           $('nav').addClass('sticky');
           else
               $('nav').removeClass('sticky');
           
    , 
        offset: '60px'
    );

);

使用航点插件，您现在可以在滚动经过一个元素或部分时轻松添加粘性类。 Jquery 选择器可以使用 # 和 . 通过 id 和 class 进行选择。分别。

【参考方案3】：

如果你使用 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);