JointsWP4(SASS):更改粘性属性


100

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. 当使用getElementByIDthen时setAttributedata-btm-anchorPHP文件中的确实会根据Firebug进行更改,但这一点不会影响标准nav。它留在原地。我是否需要“重新实例化” Sticky,如果需要,怎么做?
  2. 文档提到:

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

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

这是否意味着我可以将新参数传递给已经存在的插件实例?每当我传递一个新的Foundation.Sticky对象时,仅将btmAnchor作为一个不同的btmAnchor作为我的options数组参数jQuery('#sticky_header'),就什么也没有发生。

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

    1. 将按钮从中获取其功能的.js放入assets/js/scripts(然后运行gulp
    2. 删除my中的所有数据粘性标签<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')or 来更改属性jQuery('.header')

最重要的是,jQuery无法正常工作。我$在脚本中使用时遇到很多问题,例如,destroy()由于这个原因,我无法运行Sticky方法(如果可行,我可能已经破坏了Sticky实例以使用该btmAnchor集到一个新的滚动位置)。我将为此提出另一个问题。


1
搜索后,实际上没有wp_enqueue_script()函数调用明确地使jQuery入队,所以现在我通过写资产/函数/enqueue-scripts.php来做到这一点: wp_enqueue_script( 'jquery' ); 不幸的是,问题仍然与以前相同。还是我错误地将jQuery排入队列?JointsWP是否有自己的jQuery库?
塞缪尔LOL Hackson,

2
WordPress会自动使jQuery入队,而无需自己入队。另外,“ jQuery”是正确的-但$应该仍然有效。WordPress在无冲突模式下运行jQuery,这就是为什么使用“ jQuery”代替$的原因。
JeremyE '16

1
那么这是否意味着编写“ jQuery”而不是“ $”是首选方法,并且它应该以相同的方式工作?(我是jQuery的新手)(而且,对JointsWP的出色工作,杰里米!:)绝对喜欢。)
Samuel LOL Hackson,2016年

1
@SamuelLOLHackson,您也可以在WordPress中使用“ $”,但是,您必须像这样专门为jQuery分配jQuery:,var $ = jQuery或者像这样调用.ready()方法来传递它:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
Nikola Kirincic

1
我很惊讶,我有一个问题,留下500英镑的悬赏额用于回答,并得出真实而完整的答案,这个问题是两年前的,没有悬赏额。谢谢你的好意。
AmerllicA

Answers:


1

您可以仅在scss中使用sticky css属性。

在html或php中,将类添加到您的组件中:

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

并在scss或css中:

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

现在,只需将您需要的距离放到顶部!


0

最好完全使用jquery来控制粘性。

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

使用此按钮,您可以使按钮滚动到网站的任何部分。

对于sticky,仅在滚动到第一部分时才想添加sticky类,因此:

$(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'
    });

});

现在,使用waypoints插件,您可以在滚动到某个元素或部分时轻松添加粘性类。jQuery选择器可以使用#和使用ID和类进行选择。分别。


-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);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.