JointsWP4 (SASS): Alterando Propriedades em Sticky


100

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.

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


1
Ao pesquisar, não há realmente nenhuma chamada de função wp_enqueue_script () que enfileira explicitamente o jQuery, então agora fiz isso escrevendo em assets / functions / enqueue-scripts.php: wp_enqueue_script( 'jquery' ); Ainda o mesmo problema de antes, infelizmente. Ou enfileirei o jQuery incorretamente? O JointsWP tem suas próprias bibliotecas jQuery?
Samuel LOL Hackson

2
O WordPress enfileira automaticamente o jQuery, não há necessidade de enfileirá-lo sozinho. Além disso, "jQuery" está correto - mas $ ainda deve funcionar. O WordPress executa o jQuery em modo sem conflito, razão pela qual "jQuery" é usado em vez de $.
JeremyE

1
Isso significa que escrever "jQuery" em vez de "$" é a forma preferida de fazer isso e deve funcionar da mesma maneira? (Eu sou novo no jQuery) (também, ótimo trabalho no JointsWP, Jeremy! :) Absolutamente amo isso.)
Samuel LOL Hackson

1
@SamuelLOLHackson, você também pode usar "$" no WordPress, no entanto, você deve atribuir especificamente o jQuery a ele assim:, var $ = jQueryou passá-lo chamando o método .ready () como este:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
Nikola Kirincic

1
Estou muito surpreso, tive uma pergunta e deixo 500 bounty por responder, e cheguei à resposta verdadeira e completa, essa pergunta é de 2 anos atrás e não tem bounty. obrigado pelo seu tipo.
AmerllicA

Respostas:


1

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!


0

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.


-1

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);
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.