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 nav
barra 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 nav
barra 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 nav
barra está corretamente envolvida em todos os programas necessários div
, para que nav
possa 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-anchor
para 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:
- Ao usar
getElementByID
e entãosetAttribute
, odata-btm-anchor
no arquivo PHP muda de acordo com o Firebug, mas isso não influencianav
um pouco a barra; fica onde está. Preciso "reinstanciar" o Sticky e, em caso afirmativo, como? - 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.Sticky
objeto 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.
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:
- lançar o .js a partir do qual o botão obtém sua função
assets/js/scripts
(e depois executargulp
) - 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 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"
div
abaixo. 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 stick
ou usandojQuery('#sticky_header')
oujQuery('.header')
?- lançar o .js a partir do qual o botão obtém sua função
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 btmAnchor
conjunto para uma nova posição de rolagem). Vou abrir outra pergunta para isso.
var $ = jQuery
ou passá-lo chamando o método .ready () como este:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
wp_enqueue_script( 'jquery' );
Ainda o mesmo problema de antes, infelizmente. Ou enfileirei o jQuery incorretamente? O JointsWP tem suas próprias bibliotecas jQuery?