# Topo Flutuante

Snippet para criar um topo flutuante.

Lembrando que no exemplo usamos apenas a logo e uma mensagem de bem-vindo para o cliente realizar o login ou o cadastro, mas você pode utilizar qualquer elemento que deseje

{% tabs %}
{% tab title="HTML" %}

```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 logo">
        <a href="{{ links.home }}" data-tray-tst="logotipo_loja">{{ Image('logo') }}</a>
      </div>
      <div class="hidden-xs col-sm-8 header-customer">
        <div class="login" data-tray-tst="saudacao">
          <span class="tray-hide" data-logged-user="true">
            {{ Translation('bem_vindo_central') }} <span data-customer="name"></span>,
            <a href="{{ links.logout }}">{{ Translation('sair') }}</a></li>
          </span>
          <span class="tray-hide" data-logged-user="false">
            {{ Translation('bem_vindo_central') }}, <a href="{{ links.login }}" data-tray-tst="login" class="{{ utils.is_https ? 'modal-login' }}">{{ Translation('login') }}</a> {{ Translation('ou') }} <a href="{{ links.register }}" data-tray-tst="cadastro">{{ Translation('cadastre_se') }}</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
```

{% endtab %}

{% tab title="CSS" %}

```css
.header-fixed {
  position: fixed;
  top: 0px;
  z-index: 9999;
  background: rgb(255, 255, 255);
  left: 0px;
  width: 100%;
  height: 100px;
  line-height: 100px;
  box-shadow: 0px 5px 10px rgb(0 0 0 / 50%);
  display: none;
}
.header-fixed .logo img{
  max-height: 80px;
}
.header-fixed .header-customer{
  text-align: right;
  font-size: 14px;
}
```

{% endtab %}

{% tab title="Javascript" %}

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

{% endtab %}
{% endtabs %}

### Como usar <a href="#como-usar" id="como-usar"></a>

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

Faça a chamada desse arquivo onde desejar:

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

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

Insira o bloco de código ***Javascript*** em seu arquivo `.js`