JointsWP4 (SASS): Alterando Propriedades em Sticky

TL; DR: O Sticky é realmente capaz de reagir às alterações que forneço por meio do JavaScript? Se sim, como?

(O projeto está usando Foundation 6.2 e WordPress 4.4, tema instalado usando Node.js / npm e gulp 4.0. Minhas perguntas, em detalhes, estão marcadas em negrito.)

Quero deixar a navbarra fixa usando o Sticky Plugin da Foundation, mas apenas quando clico em um botão. Isso significa que quando o DOM estiver todo finalizado, a navbarra não deve colar "sozinha", mas ficar em sua posição superior no documento. Além disso, deve desaparecer ao rolar para baixo, mas manter-se ao rolar para cima.

A navbarra está corretamente envolvida em todos os programas necessários div, para que navpossa aderir. Os problemas surgem com a parte "adicional". Minha ideia era instanciar o Sticky usando PHP primeiro:

<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>

Depois disso, mude data-btm-anchorpara a posição de rolagem atual usando JavaScript que é disparado com um clique. Isso não funcionou tão bem quanto eu gostaria. O que tentei até agora:

1. Ao usar getElementByIDe então setAttribute, o data-btm-anchorno arquivo PHP muda de acordo com o Firebug, mas isso não influencia navum pouco a barra; fica onde está. Preciso "reinstanciar" o Sticky e, em caso afirmativo, como?
2. Os documentos mencionam:

Definir opções com JavaScript envolve passar um objeto para a função do construtor, como este:

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

Isso significa que posso passar novos parâmetros para uma instância de plugin já existente? Sempre que eu passava um novo Foundation.Stickyobjeto com nada mais do que um btmAnchor diferente como meu parâmetro de matriz de opções para o meu jQuery('#sticky_header'), nada acontecia.

3. Os documentos também propõem adicionar o Sticky de forma programática ao meu "sticky_header". Se funcionasse, eu poderia tentar alterar diretamente o objeto jQuery. Até agora, consegui vincular o plug-in Sticky ao meu cabeçalho com sucesso:

   1. lançar o .js a partir do qual o botão obtém sua função assets/js/scripts(e depois executar gulp)
   2. deletando todas as tags data-sticky de my <header class="header">, então não há plug-in sticky registrado no cabeçalho quando o DOM terminar de carregar

   3. adicionando programaticamente o plugin:

      function button_fire(){
        var options = {
          topAnchor:"1",
          btmAnchor:"footer:top",
          marginTop:"1"
        };
        var stick = new Foundation.Sticky(jQuery('.header'), options);
      }

   O cabeçalho agora ganha a classe "sticky" de acordo com o Firebug. Mas ainda não funciona - em vez disso, apresenta falhas: o "espaço do cabeçalho" está um pouco reduzido, cobrindo ligeiramente o "conteúdo" divabaixo. O que você sabe, o cabeçalho não cola. Isso é um bug?

   Suponha que funcione "brilhantemente" agora, sou teoricamente capaz de alterar os atributos desreferenciando var stickou usando jQuery('#sticky_header')ou jQuery('.header')?

Acima de tudo isso, o jQuery não funciona como deveria. Tive muitos problemas com o uso $em meus scripts e não consigo, por exemplo, executar o destroy()método do Sticky por causa disso (se funcionou, posso ter destruído uma instância do Sticky para fazer uma nova com o btmAnchorconjunto para uma nova posição de rolagem). Vou abrir outra pergunta para isso.

Você pode apenas usar o atributo sticky css em seu scss.

Em html ou php, adicione uma classe ao seu componente:

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

e em scss ou css:

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

Agora é só colocar a distância de cima que você precisa!

Prefira controlar o sticky usando jquery completamente.

$(document).ready(function(){
    $('<Your button>').click(function () {
        $('html, body').animate({scrollTop: $('<where you want to go>').offset().top}, 1000);
    });

Usando isso, você pode fazer um botão rolar para qualquer parte do seu site.

Para o sticky, você deseja adicionar a classe sticky apenas quando rolar para além da primeira seção, para:

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

});

Usando o plugin de waypoints, agora você pode adicionar facilmente a classe aderente ao rolar para além de um elemento ou seção. O seletor Jquery pode selecionar por id e classe usando # e. respectivamente.

Se você usar o wordpress, ele enfileira o JQuery automaticamente.

Você tem duas maneiras de usar JQuery no Wordpress.

Use JQuery em vez $

Wordpress executa JQuery em seu modo sem conflito, então você deve usar Jquery em seu lugar $

Seu caso

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

Use $ como uma variável

Você também pode usar $, mas deve definir uma variável como esta:

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