JointsWP4(SASS) : 改变粘性的属性

DR: Sticky 真的能够对我通过 JavaScript 所做的更改做出反应吗? 如果能，怎么做？

(该项目使用 Foundation 6.2和 WordPress 4.4，主题安装使用 Node.js/npm 和 Gulp 4.0。我的问题的细节都用粗体字标出来了。)

我想使 nav条粘性使用基金会的粘性插件，但只有当我点击一个按钮。这意味着当 DOM 全部完成时，nav条不应该粘贴“自己”，而应该保持在文档的顶部位置。向下滚动时它应该消失，但是向上滚动时它会粘住。

nav条被正确地包裹在所有需要的 div中，因此 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更改为当前滚动位置。这没有我想象的那么好。到目前为止我所做的努力:

  1. 当使用 getElementByID和 setAttribute时，PHP 文件中的 data-btm-anchor确实会根据 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')的选项数组参数，什么也没有发生。

  1. 医生还建议通过编程方式将 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);
}

    The header now gains the "sticky" class according to Firebug. But it still doesn't work - rather, it glitches: The "header space" is somewhat collapsed so it's slightly covering the "content" div below. What do you know, the header doesn't stick. Is that a bug?

    Suppose it would work "brilliantly" now, am I theoretically able to change attributes by dereferencing var stick or using jQuery('#sticky_header') or jQuery('.header')?

Above all of this, jQuery doesn't work as it should. I've had a lot of problems with using $ in my scripts, and I can't, for instance, run the destroy() method of Sticky because of this (if it worked, I may have destroyed an instance of Sticky to make a new one with the btmAnchor set to a new scrolling position). I'll open another question for this.

1792 次浏览
小开

If you use wordpress, it enqueues JQuery automatically.

You have two ways to use JQuery in Wordpress.

Use JQuery instead $

Wordpress runs JQuery in his no conflict mode so you have to use Jquery instead $

Your Case

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

Use $ like a variable

You can also use $ but you have to define a variable like this : 

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

Prefer controlling the sticky by using jquery completely. 

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

Using this you can make a button scroll you to any part of your website.

For the sticky, you want to add the sticky class only when you scroll past the first section so:

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


});

Using the waypoints plugin, you can now easily add the sticky class when you scroll past an element or section. Jquery selector can select by id and class using # and . respectively.

小开

You can just use the sticky css attribute in your scss.

In html or php add class to your component:

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

and in scss or css:

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

Now just put the distance from top you need!


提交答案