কিভাবে সি এস এস এর সাহায্যে স্টিকি সাইডবার তৈরি করবেন - How To Create Sticky Sidebar In Css

লিখেছেনঃ
প্রকাশিতঃ
 কিভাবে সি এস এস এর সাহায্যে স্টিকি সাইডবার তৈরি করবেন - How To Create Sticky Sidebar In Css

প্রিয় বন্ধুরা , সকল কেই এস এম সুদীপ বিডি এর পক্ষ্য থেকে জানাই শারদীয় শুভেচ্ছা। আশা করি আপনারা সকলেই অনেক অনেক ভালো আছেন , আর আমিও অনেক ভালো আছি।

আপনাদের সাথে তো আমি অনেক Wapkiz এবং Wapka Theme বানিয়ে শেয়ার করলাম। কিন্তু আশানুরুপ আপনাদের সাড়া পেলাম না।
তাই ভেবেছি আমি আর থিম শেয়ার করব না। এখন থেকে গুরুত্বপূর্ণ কিছু টিউন শেয়ার করব। যে গুলো প্রত্যেক Web Developer এর প্রতিনিয়তই কাজে লাগবেই।

How To Create Sticky Sidebar In Css

How To Create Sticky Sidebar In Css

আশা করি আপনারা সকলেই বুঝে গেছেন আজকের টিউন এ আপনাদের মাঝে কি শেয়ার করতে যাচ্ছি।

হ্যা , ঠিকই আজ আমি আপনাদের সাথে স্টিকি সাইডবার নিয়ে টিউন করতে যাচ্ছি। এখানে অনেকেই ভাবতেছেন স্টিকি সাইডবার আবার কি ?

সমস্যা নেই আজকের টিউনের শেষ পর্যন্ত আমার সাথেই থাকুন , আমি ১০০% গ্যারান্টি দিচ্ছি আপনি আজ স্টিকি সাইডবার নিজেই বানাতে পারবেন।
আপনি সফল ওয়েব মাস্টার হতে চাইলে আজকের টিউন আপনাকে  মনোযোগ সহকারে পড়তেই হবে। তো প্রিয় বন্ধুরা চলুন টিউনে ফীরে আসা যাক...

Sticky Sidebar Demo

Sticky Sidebar Demo


বন্ধুরা , উপরের ছবি টি একটু লক্ষ্য করুন। একটি ওয়েব পেজের কোন কন্টেন্ট কোথায় থাকে , সেই বিষয় টি আপনাদের ক্লিয়ার হয়ে যাবে।
আমরা যখন একটি ওয়েব সাইট ডিজাইন করি , এভাবেই একটি স্ট্রাকচার তৈরি করে নেই। আর তাঁর পড়েই এর ডেভেলোপ করা শুরু করি। একটি ওয়েব সাইট এর তিন টি অংশ থাকে। যথাঃ -

  1. Header
  2. Body
  3. Footer

সবার উপরের অংশ কে আমরা Header বলি। এখানে মেনুবার ও সার্চ ফর্ম  যুক্ত করা হয়। আর লগো তো থাকবেই।

যে অংশ টি  Header , Content , Sidebar এবং Footer কে ধারন করে থাকে তাকে বডি বলে। যে দুই টি অংশ পরস্পরের সাথে সম্পর্ক যুক্ত। যথাঃ -

  1. Content Area
  2. Sidebar Area

সবার নিচের অংশ কে ফুটার বলে থাকি। এখানে Social Link , Copyright এবং Back To Top এসব থাকে।

বন্ধুরা , আপনারা বিরক্ত হয়ে যান নি তো। আমি কিন্তু এখানে একটু বেশিই বক বক করেছি। তবে এর একটু কারন আছে। যারা নতুন , আশা করি তাদের যে কত টুকু উপকার হয়েছে তারাই বলতে পারবে।

তো বন্ধুরা , চলুন এবার আমাদের ব্যাসিক বিষয়ে আলোচনা করা শেষ , আমি এখন সরাসরি আমাদের আজকের টিউনের বিষয়ে চলে যাচ্ছি।

আজকে আমি আপনাদের দেখাতে চেয়েছি কিভাবে আপনি আপনার ওয়েব সাইট কে অর্থাৎ সাইডবার কে স্টিকি করে তুলবেন। এখন আপনাদের মাঝে শেয়ার করতেছি ,

# আসলেই স্টিকি সাইডবার কি ?

স্টিকি সাইডবার আমরা তাকেই বলে থাকি যখন আমরা আমাদের মাউস ক্রল করে নিচে আসি , দেখবেন ওয়েব সাইট এর সাইডবার টি তার স্থান পরিবর্তন করতেছে না। রাইট সাইড এ ফ্লট করতেছে।
সাইডবার টি ততক্ষন ধরে ফ্লট করে যতক্ষন না আমাদের কন্টেন্ট এরিয়ার হাইডের সাথে মিলে যায়।
ফলে রাইট সাইডে স্পেস দেখা যায় না এবং ওয়েব সাইট টিকে অনেক সুন্দর দেখায়।


# কিভাবে Sticky Sidebar তৈরি করবেন ?

হ্যা , বন্ধুরা এখন আপনাদের ব্যাসিক Html এবং Css এর ধারনা থাকতে হবে। আশা করি আপনাদের Html এবং Css সম্পর্কে ধারনা রয়েছে।
আমি উপরে যে একটি স্ট্রাকচার দিয়েছিলাম সেই স্ট্রাকচারের কোড এ রুপান্তর করতেছি।

<html>
<head><title>How To Create Sticky Sidebar In Css</title></head>
<body>
<header id='header'>Header</header>
<div id='main-wrraper'>
<div id='content-wrraper'>
<div class='content'>Content</div>
</div>
<div id='sidebar-wrraper'>
<div class='sidebar'>Sticky Sidebart</div>
</div>
</div>
<footer id='footer'>Footer</footer>


এখন আমাদের যা করতে হবে সব কিছু Css এ করতে হবে। তাহলে চলুন এখন স্টিকি সাইডবারের Css তৈরি করে ফেলি।



<style type='text/css'>
#header {
    background: #000;
    padding: 20px 10px;
    color: #fff;
    font-size: 20px;
    text-align: center;
}
#main-wrraper {
    display: flex;
    justify-content: space-between;
    margin: auto 5%;
    clear: both;
}
#content-wrraper {
    width: 69.7%;
    float: left;
    margin: 0px;
    position: relative;
    margin: 0px 5px;
}
.content {
    background: red;
    padding: 10px;
    height: 500px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}
#sidebar-wrraper {
    width: 29%;
    height: 100%;
    float: right;
    display: block;
    position: relative;
    margin: 0px 5px;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.sidebar {
    background: blue;
    padding: 30px 10px;
    color: #fff;
    font-size: 20px;
    height: 100%;
    text-align: center;
}
#footer {
    background: #000;
    padding: 20px 10px;
    color: #fff;
    font-size: 20px;
    text-align: center;
}
</style>

আমাদের Css তৈরি করা শেষ তাই না। এখানে আপনাদের বলে রাখি আমি শুধু মাত্র একটি সাধারন স্ট্রাকচার তৈরি করেছি। আপনারা এখান থেকে ধারনা নিয়ে নিজের মত করে তৈরি করবেন।

এখানে যে Css টি অধিক গুরুত্বপূর্ণ সেটি আমি আপনাদের অবগত করতে চাই। নিচে সেই Css টি নিয়ে আলোচনা করতেছি।

#sidebar-wrraper {
    width: 29%;
    height: 100%;
    float: right;
    display: block;
    position: relative;
    margin: 0px 5px;
    padding: 0;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}


উক্ত Css এ আমি লাল কালার দিয়ে লাইন গুলো সনাক্ত করেছি। আপনি যদি height: 100%;  না দিয়ে অন্য কিছু দেন , যেমন -  height: auto; তবে কিন্তু স্টিকি সাইডবার আর কাজ করবে না। তবে আপনি যদি Fixt Height ব্যবহার করেন তবেও কাজ করবে। যেমন - height: 1000px; 

আর position: -webkit-sticky; position: sticky; এটি কোন রুপ পরিবর্তন যদি করেন তবে স্টিকি সাইডবার কাজ করবে না।

সর্বশেষ top: 0; এটিও পরিবর্তন করবেন না। টা না হলে top: 0; না দিয়ে যদি যেমন দিলেন top: 20px; তাহলে আপনার সাইডবার টপ থেকে 20px নিচে ফ্লটিং করবে।


তো বন্ধুরা আজকে আমরা এক দম টিউনের শেষ পর্যায়ে চলে এসেছি , আজকের মতন আমাকে টিউন থেকে বিদায় নিতে হচ্ছে। জানি না আমি আপনাদের কত টুকু বুঝাতে সক্ষম হয়েছি।
যদি আপনাদের সামান্য তম উপকার হয়ে থাকে কমেন্ট করে অবশ্যই পাশে থাকবেন। কারন আপনারা যদি কমেন্ট না করেন , তবে আমার এই সাইট টি চলবে কি করে। তাই কমেন্ট করে অবশ্যই আপনার মতামত জানাতে ভূলবেন না।

পরিশেষে , আজকের টিউনের সকল ভুল ভ্রান্তি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন। আর কোন ভূল হয়ে থাকলে ক্ষমা চেয়ে নিচ্ছি। অবশ্য আমাকে ক্ষমা করে দিবেন।
সকলের সু - সাস্থ কামনা করে আজকের টিউন এখানেই শেষ করতেছি। ভালো থাকবেন।
টাটা।

ক্রেডিট বাইঃ - SMsudipBD.Com
পোস্ট রেটিং করুন
ট্যাগঃ
About Author


টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!