JointsWP4 (SASS): изменение свойств в Sticky

TL; DR: Действительно ли Sticky реагирует на изменения, которые я даю через JavaScript? Если да, то как?

(В проекте используются Foundation 6.2 и WordPress 4.4, тема установлена с использованием Node.js/npm и gulp 4.0. Мои вопросы, в деталях, выделены полужирным шрифтом.)

Я хочу сделать панель nav липкой, используя Foundation Sticky Plugin, но только когда я нажимаю кнопку. Это означает, что когда DOM закончен, nav панель не должна вставляться "сама по себе", но оставаться в ее верхнем положении в документе. Кроме того, он должен исчезнуть при прокрутке вниз, но при этом прокручивайтесь.

nav панель корректно завернута во все требуемые div s, поэтому nav панель может придерживаться. Проблемы возникают с "дополнительной" частью. Моя идея состояла в том, чтобы сначала внедрить Sticky с помощью 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, setAttribute data-btm-anchor в файле PHP изменяется в соответствии с 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'), ничего не происходило.

3. Документы также предлагают программное добавление Sticky к моему "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);
      }
      

   Теперь заголовок получает "липкий" класс в соответствии с Firebug. Но он все еще не работает - скорее, он глючит: "пространство заголовка" несколько рухнуло, поэтому оно слегка покрывает "контент" div ниже. Что вы знаете, заголовок не прилипает. Это ошибка?

   Предположим, что теперь он будет "блестяще", теоретически я могу изменить атрибуты путем разыменования var stick или с помощью jQuery('#sticky_header') или jQuery('.header')?

Прежде всего, jQuery не работает должным образом. У меня было много проблем с использованием $ в моих скриптах, и я не могу, например, запустить метод destroy() из Sticky из-за этого (если он сработает, я, возможно, уничтожил экземпляр Sticky, чтобы сделать новый с btmAnchor установленным в новую позицию прокрутки). Я открою для этого еще один вопрос.

Ответы

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

});

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(JQuery('#some-accordion'), options);

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