---
layout: base
title: Sticky
---

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2>Esempio Componente Sticky: trigger tramite elemento target</h2>
    </div>
  </div>
</div>

<header
  class="it-header-wrapper it-header-sticky"
  data-bs-toggle="sticky"
  data-bs-position-type="fixed"
  data-bs-target="#stickyTrigger1"
  data-bs-sticky-class-name="is-sticky"
>
  <div class="it-header-slim-wrapper">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="it-header-slim-wrapper-content">
            <a class="d-none d-lg-block navbar-brand" href="#">Ente appartenenza</a>
            <div class="nav-mobile">
              <nav aria-label="Navigazione secondaria">
                <a class="it-opener d-lg-none" data-bs-toggle="collapse" href="#menuC1" role="button" aria-expanded="false" aria-controls="menuC1">
                  <span>Ente appartenenza</span>
                  <svg class="icon" aria-hidden="true">
                    <use href="/dist/svg/sprites.svg#it-expand"></use>
                  </svg>
                </a>
                <div class="link-list-wrapper collapse" id="menuC1">
                  <ul class="link-list">
                    <li><a class="dropdown-item list-item" href="#">Link 1</a></li>
                    <li><a class="list-item active" href="#" aria-current="page">Link 2 (Attivo)</a></li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="it-nav-wrapper">
    <div class="it-header-center-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="it-header-center-content-wrapper">
              <div class="it-brand-wrapper">
                <a href="#">
                  <svg class="icon" aria-hidden="true">
                    <use href="/dist/svg/sprites.svg#it-pa"></use>
                  </svg>
                  <div class="it-brand-text">
                    <div class="it-brand-title">Nome dell'Istituzione</div>
                    <div class="it-brand-tagline d-none d-md-block">Tag line dell'Istituzione</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="it-header-navbar-wrapper" id="stickyTrigger1">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <!--start nav-->
            <nav class="navbar navbar-expand-lg has-megamenu" aria-label="Navigazione principale">
              <button
                class="custom-navbar-toggler"
                type="button"
                aria-controls="navC1"
                aria-expanded="false"
                aria-label="Mostra/Nascondi la navigazione"
                data-bs-toggle="navbarcollapsible"
                data-bs-target="#navC1"
              >
                <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-burger"></use></svg>
              </button>
              <div class="navbar-collapsable" id="navC1" style="display: none">
                <div class="overlay" style="display: none"></div>
                <div class="close-div">
                  <button class="btn close-menu" type="button">
                    <span class="visually-hidden">Nascondi la navigazione</span>
                    <svg class="icon"><use href="{{ site.baseurl }}/dist/svg/sprites.svg#it-close-big"></use></svg>
                  </button>
                </div>
                <div class="menu-wrapper">
                  <ul class="navbar-nav">
                    <li class="nav-item active">
                      <a class="nav-link active" href="#" aria-current="page"><span>Link 1 (attivo)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link disabled" href="#" aria-disabled="true"><span>Link 2 (disabilitato)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#"><span>Link 3</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#"><span>Link 4</span></a>
                    </li>
                  </ul>
                </div>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="col-12 padding-block"></div>
  </div>
</div>

<style>
  .padding-block {
    height: 5000px;
    background-color: #eee;
    opacity: 0.8;
    background: repeating-linear-gradient(45deg, #ccc, #ccc 5px, #eee 5px, #eee 25px);
  }
</style>