স্টিকি ফুটার

স্টিকি ফুটার হল নোটিশ প্রদর্শনের একটি জনপ্রিয় উপায়। পাদচরণে রাখা বিজ্ঞপ্তিগুলি নেভিগেশন বার, ব্র্যান্ডিং এবং ব্যানার বিজ্ঞাপনের মতো পৃষ্ঠার উপাদানগুলিকে অস্পষ্ট করার সম্ভাবনা কম। উপরন্তু, পৃষ্ঠায় ঢোকানো হলে স্টিকি ফুটার লেআউট পরিবর্তনের কারণ হয় না।

এইচটিএমএল

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