Question

TL; DR：Sticky实际上能够对我通过JavaScript提供的更改做出反应吗？如果是这样，怎么样？

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

我想使用Foundation的Sticky Plugin使nav条粘贴，但只有当我点击按钮时才会这样。这意味着当DOM全部完成时，nav栏不应该自己“＃34;”，而是保持在文档的最高位置。 此外，它在向下滚动时会消失，但在向上滚动时会消失。

nav栏已正确包装在所有必需的div中，因此nav栏可以粘贴。问题出现在＆＃34;另外＆＃34;部分。我的想法是首先使用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栏a位;它保持原样。 我是否需要＆＃34;重新实施＆＃34;粘，如果是，怎么样？
docs提及：

使用JavaScript设置选项涉及将对象传递给构造函数，如下所示：
var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

这是否意味着我可以将新参数传递给现有的插件实例？每当我传递一个新的Foundation.Sticky对象时，只有一个不同的< em> btmAnchor 作为my jQuery('#sticky_header')的选项数组参数，没有任何反应。

docs还建议以编程方式将Sticky添加到我的＆＃34; sticky_header＆＃34;。如果有效，我可以尝试直接改变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);
}
```

Answer 1

最好完全使用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'
    });

});

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

Answer 2

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

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

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

以及在scss或css中：

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

现在只需把距您所需的顶部的距离放远即可！

Answer 3

如果你使用wordpress，它会自动将JQuery排队。

你有两种方法可以在Wordpress中使用JQuery。

使用JQuery代替$

Wordpress在他的无冲突模式下运行JQuery，所以你必须使用Jquery而不是$

你的案子

<div *ngFor="let service of services">
   <span><img  [src]="service.imgPath" alt="{{ service.name }}"/></span>
   <h4>{{service.name | translate}}</h4>
   <p>{{service.desc}}</p>
</div>

使用$像变量

你也可以使用$，但你必须定义一个这样的变量：

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

JointsWP4（SASS）：更改粘性

3 个答案: