JointsWP4 (SASS): Зміна властивостей у липкій

TL; DR: Чи реально Sticky здатний реагувати на зміни, які я надаю через JavaScript? Якщо так, то як?

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

Я хочу зробити navпланку клейкою за допомогою Sticky Plugin Foundation, але лише тоді, коли натискаю кнопку. Це означає, що після закінчення роботи з 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планку трохи; вона залишається там, де є. Чи потрібно «реінстаціювати» липкі, і якщо так, то як?
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набір в нове положення прокрутки). Я відкрию для цього ще одне питання.

Ви можете просто використовувати атрибут stickss 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'
    });

});

Використовуючи плагін шляхових точок, тепер ви можете легко додати клас липких, коли прокручуєте повз елемент або розділ. Селектор 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);