Yapışkan altbilgi

Yapışkan altbilgiler, bildirimleri görüntülemenin popüler bir yoludur. Altbilgiye yerleştirilen bildirimlerin gezinme çubukları, marka öğeleri ve banner reklamlar gibi sayfa öğelerini gizleme olasılığı daha düşüktür. Ayrıca, yapışkan altbilgiler sayfaya eklendiklerinde düzende kaymalara neden olmaz.

<div id="banner" class="banner">
    <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
    <div>
        <h1>Notice</h1>
        Lorem ipsum dolor sit amet.
    </div>
</div>

        body {
    font-family: system-ui;
    padding: 2em;
    overscroll-behavior-y: none;
    background-color: #f4f4f4;
}
.banner {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.close-button {
    background: transparent;
    border: none;
    padding: 1em;
    font-size: 1em;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
        

        document.getElementById("close-button").onclick = () => {
    document.getElementById("banner").style.display = "none";
}