تذييل لاصق

تعد التذييلات اللاصقة طريقة شائعة لعرض الإشعارات. تقل احتمالية أن تؤدي الإشعارات الموضوعة في التذييل إلى حجب عناصر الصفحة مثل أشرطة التنقل والعلامة التجارية وإعلانات البانر. بالإضافة إلى ذلك، لا تتسبب التذييلات الثابتة في متغيّرات التصميم عند إدراجها في الصفحة.

HTML

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

CSS


        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;
}

JS


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