কিভাবে এলিমেন্টরে স্টিকি হেডার তৈরি করা যায় ফ্রী ( কোড সহ ) ।

অনেক সময় এলিমেন্টর দিয়ে ট্রান্সপারেন্ট হেডার বানআতে হয়। কিন্তু হেডার স্ক্রল করলে আবার এক্টী স্টিকি হেডারের প্রয়োজন হয়। নিচের ইন্সট্রাকশন ফলো করলে আপনিও সহজে বানাতে পারবেন।

কিভাবে ট্রান্সপারেন্ট হেডার বানাবেন?

আপনি যেভাবে হেডার বানান সেভাবে বানিয়ে Advanced অপশনে যান, সেখানে থেকে Bottom Margin -80 অথবা আপনার হেডারের সাইজ অনুযায়ি করুন। তারপর z index = 999 অথবা আরও বেশি দিন। হেডারের সেকশনে গিয়ে class = clearHedaer দিন।

কিভাবে স্টকি হেডার বানাবেন?

আপনি যে হেডারটি বানিয়েছেন সেখান একটি html এলিমেন্ট ড্রাগ করে আনুন। তারপর নিচের CSS কোডটি বসিয়ে দিন। Background color থেকে আপনার ওয়েবসাইট এর কালার দিয়ে এদজাস্ট করুন।

<style>
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

.stickyHeader{
   background-color: rgba(0, 71, 206, 0.8) !important;
    position: fixed;
    width: 100%;
    top: 0;
    transition: all 0.3s ease-in-out;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(function() {
    //caches a jQuery object containing the header element
    var header = $(".clearHeader");
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            header.removeClass('clearHeader').addClass("stickyHeader");
        } else {
            header.removeClass("stickyHeader").addClass('clearHeader');
        }
    });
});
</script>