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

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

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

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

navБар правильно завернутые во всех необходимых divх, так что 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, 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 в качестве параметра массива параметров my 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набор в новое положение прокрутки). Я открою для этого еще один вопрос.

Вы можете просто использовать атрибут sticky css в своем scss.

В html или php добавьте класс к вашему компоненту:

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

и в scss или css:

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

Теперь просто установите необходимое расстояние от вершины!

Предпочитаете полностью контролировать липкое содержимое с помощью 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 может выбирать по идентификатору и классу с помощью # и. соответственно.

Если вы используете 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);