JointsWP4（SASS）：在粘改变属性

Question

TL; DR：是粘性居然能的变化我通过JavaScript给什么反应呢？如果是这样，怎么样？

（该项目通过基金会6.2和WordPress 4.4，主题安装使用的Node.js / NPM和吞掉4.0。我的问题，详细，被标记为粗体）。

我想要使​​用基金会的粘插件的nav条粘，但只有当我点击一个按钮。这意味着，当DOM吃完以后，nav酒吧不应该坚持“本身”，而是停留在文档中的顶部位置。另外，应该同时向上滚动向下滚动时消失，但坚持下去。

该nav条正确包裹在所有需要divs，所以nav酒吧是能够坚持。与“附加”部分出现的问题。我的想法是先用PHP来实例化置顶：

<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，在PHP文件data-btm-anchor根据萤火虫不会改变，但这并不影响nav栏位;它保持它在哪里。我是否需要“重新实例”粘性，如果是这样，怎么样？
2. 该docs提及：

用JavaScript设置选项则是传递一个对象到构造函数，就像这样：

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

这是否意味着我可以通过新的参数已经存在的插件实例？每当我经过与只不过是不同的btmAnchor更是我的选择阵列参数的新Foundation.Sticky反对我jQuery('#sticky_header')，什么都没有发生。

3. 该docs还提出编程将粘到我的“sticky_header”。如果是工作，我可以尝试直接修改jQuery对象。到目前为止，我已经能够粘滞插件来我的头被成功绑定： 投掷从该按钮获得其功能分为assets/js/scripts所述的.js（然后运行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);
   }

   其文件头现在根据萤火虫斩获“粘”类。但它仍然无法正常工作 - 更确切地说，它过失：“页眉空间”是有点崩溃了，所以它稍微覆盖下面的“内容” div。你知道什么，头不沾。那是一个错误吗？ 假设它的工作“出色”现在，我要把理论上能够改变提领var stick或使用jQuery('#sticky_header')或jQuery('.header')属性？

以上这一切，jQuery的不能正常工作，因为它应该。我有很多的问题，在我的脚本中使用$，我不能，例如，运行置顶的destroy()方法，因为这（如果它的工作，我可能已经销毁置顶的一个实例，使新一个设置为一个新的滚动位置的btmAnchor）。我会打开这个另外一个问题。

Answer 1

你可以只使用粘性的CSS属性，在SCSS。

HTML或PHP类添加到您的组件：

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

在SCSS或CSS：

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

现在只是把距离顶部，你需要的！

Answer 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选择可以通过标识和使用＃类，并选择。分别。

Answer 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);