Topo Flutuante

Snippet para criar um topo flutuante

HTML


{#
# Topo Flutuante
# elements/snippets/topo_flutuante.html
#}

<div class="header-fixed">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-4 text-left">
                <a class="brand" href="{{ links.home }}" title="{{ store.name }}">{{ store.name }}</a>
            </div>
            <div class="hidden-xs col-sm-4 header-customer text-right">
                {% element 'snippets/customer' %}
            </div>
            <div class="col-xs-12 col-sm-4 text-right">
                {% element 'snippets/search' %}
            </div>
        </div>
    </div>
</div>

CSS

.header-fixed {
      background-color: #fff;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 999;
      width: 100%;
      display: none;
      border-top: 2px solid #000;
      border-bottom: 2px solid #000;
  }

Javascript

(function($){
  $(document).ready(function () {

      $(window).scroll(function () {
          var topScroll = Number(jQuery(window).scrollTop());

          if (topScroll >= 200) {
              $(".header-fixed").css( "display", "block" );
          } else {
              $(".header-fixed").css( "display", "none" );
          }
      });

  });
})(jQuery);

Exemplo

Como usar

Copie o código HTML e crie um arquivo separado, ex: elements/snippets/smart_filter.html

Insira o bloco de código CSS em sua folha de estilo

Insira o bloco de código Javascript em seu arquivo JS

Faça a chamada desse arquivo onde desejar:

{% element('snippets/topo_flutuante') %}