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

<div class="container">
  <div class="row">
    <div class="col-12">
      <h2>Esempio Componente Sticky: posizionamento sticky e fixed</h2>
    </div>
  </div>
</div>

<div class="container container-padding">
  <div class="row">
    <div class="col-12 sticky-parent">
      <div class="it-header-slim-wrapper" data-bs-toggle="sticky">
        <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="#">Elemento Sticky</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-12 sticky-parent">
      <div class="it-header-slim-wrapper" data-bs-toggle="sticky" data-bs-position-type="fixed" data-bs-sticky-class-name="is-sticky">
        <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="#">Elemento Sticky - fixed</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <!-- Button trigger modal -->
      <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Lancia la demo della modale</button>

      <!-- Modal -->
      <div class="modal fade" tabindex="-1" role="dialog" id="exampleModal" aria-labelledby="exampleModalTitle">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h2 class="modal-title h5 no_toc" id="exampleModalTitle">Intestazione modale</h2>
            </div>
            <div class="modal-body">
              <p>Font Titillium 16px. Leading 24px. omnis iste natus error.</p>
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary btn-sm" data-bs-dismiss="modal" type="button">Chiudi modale</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .container-padding {
    padding-bottom: 3000px;
  }
  .sticky-parent {
    margin-top: 15px;
    padding-top: 100px;
    border: 2px solid #ccc;
    height: 500px;
  }
  .is-sticky {
    left: 0;
    width: 100%;
  }
</style>