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, который был запущен при нажатии. Это не сработало, как хотелось бы. То, что я пробовал до сих пор:

При использовании getElementByID а затем setAttribute, setAttribute data-btm-anchor в файле PHP изменяется в соответствии с Firebug, но это немного влияет на панель nav; он остается там, где он есть. Нужно ли мне "переустанавливать" Sticky, и если да, то как?
В документах упоминается:

Параметры настройки с использованием JavaScript включают передачу объекта в конструкторскую функцию, например:
var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

Означает ли это, что я могу передавать новые параметры уже существующему экземпляру плагина? Всякий раз, когда я передавал новый объект Foundation.Sticky с не более чем отличным параметром btmAnchor в качестве параметра параметров параметров моего jQuery('#sticky_header'), ничего не происходило.

Документы также предлагают программное добавление 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 установленным в новую позицию прокрутки). Я открою для этого еще один вопрос.

Ответ 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'
    });

});

Используя плагин waypoints, теперь вы можете легко добавлять липкий класс, когда вы прокручиваете элемент или раздел. Селектор Jquery может выбирать по id и классу с помощью # и. соответственно.

Ответ 2

Если вы используете WordPress, он автоматически ставит JQuery в очередь.

У вас есть два способа использовать JQuery в Wordpress.

Используйте JQuery вместо $

Wordpress запускает JQuery в его режиме без конфликтов, поэтому вы должны использовать вместо него Jquery $

Ваш случай

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

Используя плагин waypoints, вы можете легко добавить липкий класс, когда прокручиваете элемент или раздел. Потоковый селектор VF Jquery можно выбирать по идентификатору и классу, используя # и. соответственно.

Ответ 3

Если вы используете Wordpress, он автоматически запускает JQuery.

У вас есть два способа использования JQuery в Wordpress.

Используйте 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);