বুটস্ট্রাপ জেএস এফিক্স রেফারেন্স - Bootstrap JS Affix Reference
বুটস্ট্রাপ JS এফিক্স (affix.js)
একটি ইলিমেন্টকে পেজের একটি নির্দিষ্ট জায়গায় ফিক্সড করে দেওয়ার ক্ষেত্রে এফিক্স প্লাগ-ইন ব্যবহার করা হয়। এটি প্রায়ই ন্যাভিগেশন মেনু এবং সোস্যাল আইকনের ক্ষেত্রে ব্যবহার করা হয়, যাতে করে এগুলো পেজ স্ক্রলিং করার সময় পেজের একটি নির্দিষ্ট স্থানে গিয়ে ফিক্সড হয়ে যায়।
এই প্লাগ-ইনটি স্ক্রলিং পজিশনের উপর ভিত্তি করে এলিমেন্টের আচরকে টোগল করে (সিএসএসের পজিশন স্ট্যাটিক থেকে ফিক্সড করে)।
এফিক্স প্লাগইনটি মূলত তিন ক্লাসের মধ্যে টোগলঃ .affix, .affix-top, এবং
.affix-bottom। প্রতিটি ক্লাসই নির্দিষ্ট স্টেটের প্রতিনিধিত্ব করে। আপনাকে অবশ্যই আসল অবস্থানে হ্যান্ডেল করার জন্য .affix ক্লাসে সিএসএসের position:fixed প্রপার্টিটি ব্যবহার করতে হবে।
অধিক তথ্যের জন্য আমাদের বুটস্ট্রাপ এফিক্স টিউটোরিয়ালটি পড়ুন।
টিপসঃ এফিক্স প্লাগ-ইনটি স্ক্রলস্পাই প্লাগ-ইনের সাথে ব্যবহার করা যায়।
data-* এট্রিবিউট মাধ্যম
যেই এলিমেন্টটিকে এফিক্স যুক্ত করতে চান ঐ এলিমেন্টটিতে data-spy="affix" এট্রিবিউট এবং স্ক্রলের অবস্থান নির্দিষ্ট করা জন্য
data-offset-top|bottom="number" এট্রিবিউট যুক্ত করুন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>বুটস্ট্রাপ এফিক্স উদাহরণ</h1>
<h3>স্ক্রলিং ফিক্সড (sticky) ন্যাভবার</h3>
<p>data-spy="affix" এর ফলে ন্যাভবার কেমন দেখায় তা দেখার জন্য পেজটি স্ক্রলিং করুন। </p>
<p><strong>আপনি একটি নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারটি পেজের উপর স্থির হয়ে যাবে।</strong></p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" style="border-radius:0">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home page</a></li>
<li><a href="#">Service page</a></li>
<li><a href="#">Contract page</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
</div>
</body>
</html>
ফলাফল
বুটস্ট্রাপ এফিক্স অপশন
অপশন ডেটা অ্যাট্রিবিউট বা জাভাস্ক্রিপ্টের মাধ্যম অতিক্রম করতে পারে। ডেটা অ্যাট্রিবিউট এর ক্ষেত্রে, ডেটাতে অপশনের নাম লিখুন-,যেমন ডেটা-offset=""
| নাম | টাইপ | ডিপল্ট | বর্ণনা |
|---|---|---|---|
offset |
number | object | function |
10 |
যখন স্ক্রলের পজিশন গননা করা হয় তখন পিক্সেল সংখ্যা নির্দিষ্ট করে। যখন একটি একক সংখ্যা ব্যবহার করা হয় তখন অফসেট উপর এবং নিচের ডিরেকশনে সেট হয়। যদি আপনি শুধুমাত্র উপর অথবা নিচের ডিরেকশন নিয়ন্ত্রণ করতে চান তখন অবজেক্ট ব্যবহার করতে পারেন, যেমনঃ offset: {top:25}।একাধিক অফসেটের জন্য, offset: {top:25, bottom:50} ব্যবহার করুন।টিপসঃ ডায়নামিক অফসেট নির্ধারণ করার জন্য ফাংশন ব্যবহার করা হয়। |
target |
sector | node | element |
window object |
এফিক্সের টার্গেট এলিমেন্টকে নির্দিষ্ট করে। |
বুটস্ট্রাপ এফিক্স ইভেন্ট
নিচের টেবিলে এফিক্স সংক্রান্ত ইভেন্টগুলো দেয়া হলো
| ইভেন্ট | বর্ণনা | উদাহরণ |
|---|---|---|
affix.bs.affix |
এফিক্স এলিমেন্টটি ফিক্সড হওয়ার পূর্বে এই ইভেন্টটি ঘটে। (যখন
.affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস হতে যায়) |
উদাহরণ দেখুন |
affixed.bs.affix |
ফিক্সড পজিশন সম্পন্ন হওয়ার এই ইভেন্টটি ঘটে। (যখন .affix-top ক্লাসটি .affix ক্লাস দ্বারা রিপ্লেস সম্পন্ন হয়।) |
উদাহরণ দেখুন |
affix-top.bs.affix |
টপ(এফিক্স) এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পূর্বে এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (যখন .affix ক্লাস .affix-top ক্লাসের জায়গায় রিপ্লেস হতে যায়) |
উদাহরণ দেখুন |
affixed-top.bs.affix |
টপ এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পর এই ইভেন্টটি সম্পন্ন হয় (non-fixed) ।
(.affix ক্লাস
.affix-top এর দ্বারা পরিবর্তিত হবে) |
উদাহরণ দেখুন |
affix-bottom.bs.affix |
বটম এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পূর্বে এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (.affix ক্লাসটি
.affix-bottom ক্লাস দ্বারা পরিবর্তিত হবে) |
|
affixed-bottom.bs.affix |
বটম এলিমেন্টের নিজস্ব স্থানে ফিরে আসার পর এই ইভেন্টটি সম্পন্ন হয় (non-fixed)। (.affix ক্লাসটি
.affix-bottom ক্লাস দ্বারা পরিবর্তন সম্পন্ন হয়।) |
আরো উদাহরণ
স্বয়ংক্রিয়ভাবে ন্যাভবারকে এফিক্স করার জন্য জেকুয়েরির ব্যবহার
ইউজার একটি এলিমেন্টের(<header>) নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারকে এফিক্স করার জন্য জেকুয়েরির outerHeight() মেথড ব্যবহার করা হয়।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="header" class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>বুটস্ট্রাপ এফিক্স উদাহরন</h1>
<h3>ন্যাভবারকে ফিক্সড (sticky) করার জন্য জেকুয়েরির ব্যবহার করা হয়েছে।</h3>
<p>ন্যাভবার কেমন দেখায় তা দেখার জন্য পেজটি স্ক্রলিং করুন।</p>
<p>স্ক্রল করে হেডার এলিমেন্ট অতিক্রম করার পর ন্যাভবারটি পেজের উপর স্থির হয়ে যাব।</p>
</div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home page</a></li>
<li><a href="#">Service page</a></li>
<li><a href="#">Contract page</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
</div>
<script>
$(document).ready(function(){
$(".navbar").affix({offset: {top: $("#header").outerHeight(true)} });
});
</script>
</body>
</html>
ফলাফল
এ্যানিমেশনযুক্ত এফিক্স ন্যাভবার
বিভিন্ন .affix ক্লাসকে সূনিপুন করার জন্য সিএসএস ব্যবহার করুনঃ
উদাহরণ- স্ক্রলিংয়ে ব্যাকগ্রাউন্ড কালার এবং প্যাডিংয়ের পরিবর্তন
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
.affix + .container-fluid {
padding-top: 95px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>বুটস্ট্রাপ এফিক্স উদাহরণ</h1>
<h3>স্ক্রলিং ফিক্সড (sticky) ন্যাভবার</h3>
<p><strong>আপনি একটি নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারটি পেজের উপর স্থির হয়ে যাবে।</strong></p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" style="border-radius:0">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home page</a></li>
<li><a href="#">Service page</a></li>
<li><a href="#">Contract page</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
</div>
</body>
</html>
ফলাফল
উদাহরণ - ন্যাভবারের মধ্যে স্লাইড
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>বুটস্ট্রাপ এফিক্স উদাহরণ</h1>
<h3>স্ক্রলিং ফিক্সড (sticky) ন্যাভবার</h3>
<p><strong>আপনি একটি নির্দিষ্ট সংখ্যক পিক্সেল স্ক্রলিং করার পর ন্যাভবারটি পেজের উপর স্থির হয়ে যাবে।</strong></p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197" style="border-radius:0">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home page</a></li>
<li><a href="#">Service page</a></li>
<li><a href="#">Contract page</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
<h1>This is some normal text.</h1>
</div>
</body>
</html>
ফলাফল