বুটস্ট্রাপ স্ক্রলস্পাই - Bootstrap Scrollspy
বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন
বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টে স্বয়ংক্রিয়ভাবে আপডেট পাঠানোর জন্য ব্যবহার করা হয়।
কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করবেন
কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Scrollspy 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>
body {
position: relative;
}
#home {padding-top:50px;height:500px;color: #000; background-color: #fff;}
#service1 {padding-top:50px;height:500px;color: #000; background-color: teal;}
#service2 {padding-top:50px;height:500px;color: #000; background-color: bisque;}
#contract {padding-top:50px;height:500px;color: #000; background-color: green;}
#about-us {padding-top:50px;height:500px;color: #000; background-color: #fff;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarId">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Site Logo</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbarId">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Service<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#service1">Web-development</a></li>
<li><a href="#service2">App-development</a></li>
</ul>
</li>
<li><a href="#contract">Contract</a></li>
<li><a href="#about-us">About us</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div id="home" class="container-fluid">
<h1>Home</h1>
<p>This is home section. In the time of scrolling, look into the navigation bar. This is home section.
In the time of scrolling, look into the navigation bar......</p>
</div>
<div id="service1" class="container-fluid">
<h1>Service</h1>
<h2>Service - Web-development</h2>
<p>This is service section's web-development section. In the time of scrolling, look into
the navigation bar. This is service section's web-development section......</p>
</div>
<div id="service2" class="container-fluid">
<h1>Service</h1>
<h2>Service - App-development</h2>
<p>This is service section's app-development . In the time of scrolling, look into the navigation bar.
This is service section's app-development........</p>
</div>
<div id="contract" class="container-fluid">
<h1>Contract</h1>
<p>This is Contract section. In the time of scrolling, look into the navigation bar.
This is Contract section. In the time of scrolling.........</p>
</div>
<div id="about-us" class="container-fluid">
<h1>About us</h1>
<p>This is about us section. In the time of scrolling, look into the navigation bar.
This is about us section. In the time of scrolling.......</p>
</div>
</body>
</html>
ফলাফল
উদাহরণের ব্যাখ্যা
যেই এলিমেন্টটিকে স্ক্রলযোগ্য এরিয়া করতে চান ঐ এলিমেন্টটিতে data-spy="scroll" এট্রিবিউট যুক্ত করুন (এক্ষেত্রে সাধারণত <body> এলিমেন্টই ব্যবহার করা হয়)।
তারপর data-target এট্রিবিউট যুক্ত করুন যার ভ্যালু হবে ন্যাভিগেশন বারের আইডি বা ক্লাস (.navbar)। এর মাধ্যমে ন্যাভবারের সাথে স্ক্রলযোগ্য এরিয়ার লিংক করা হয়।
মনে রাখবেন অবশ্যই স্ক্রলযোগ্য এলিমেন্টের আইডির সাথে ন্যাভিগেশন লিংকের আইডির সাথে মিল হতে হবে
(<div id="section1"> সাথে <a href="#section1">) মিল থাকতে হবে।
data-offset এট্রিবিউটের মাধ্যমে এটা নির্দিষ্ট করা হয় যে কতো পিক্সেলের মধ্যে স্ক্রলিং একটিভ হবে। ডিফল্ট ভ্যালু হলো 10px।
রিলেটিভ পজিশনঃ data-spy="scroll" যুক্ত এলিমেন্টে সিএসএসের position প্রোপার্টি প্রয়োজন, যার ভ্যালু হবে "relative"।
উলম্ব(Vertical) স্ক্রলস্পাই মেনু
এই উদাহরণে মেনু হিসেবে আমরা বুটস্ট্রাপের vertical ন্যাভিগেশন পিল ব্যবহার করেছি।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Scrollspy 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>
body {
position: relative;
}
ul.nav-pills {
top: 20px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
#home {color: #000; background-color: #fff;;}
#service1 {color: #000; background-color: teal;}
#service2 {color: #000; background-color: bisque;}
#contract {color: #000; background-color: green;}
#about-us {color: #000; background-color: #fff;}
@media screen and (max-width: 810px) {
#section1, #section2, #section3, #section41, #section42 {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target="#scrollspyId" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="scrollspyId">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#home">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Service<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#service1">Web-development</a></li>
<li><a href="#service2">App-development</a></li>
</ul>
</li>
<li><a href="#contract">Contract</a></li>
<li><a href="#about-us">About us</a></li>
</ul>
</nav>
<div class="col-sm-9">
<div id="home">
<h1>Home</h1>
<p>This is home section. In the time of scrolling, look into the navigation bar.
This is home section. In the time of scrolling, look into the navigation bar.
This is home section. In the time of scrolling, look into the navigation bar.</p>
</div>
<div id="service1">
<h1>Service</h1>
<h2>Service - Web-development</h2>
<p>This is service section's web-development section. In the time of scrolling,
look into the navigation bar.</p>
</div>
<div id="service2">
<h1>Service</h1>
<h2>Service - App-development</h2>
<p>This is service section's app-development . In the time of scrolling,
look into the navigation bar. This is service section's app-development.</p>
</div>
<div id="contract">
<h1>Contract</h1>
<p>This is Contract section. In the time of scrolling, look into the navigation bar.
This is Contract section. In the time of scrolling, look into the navigation bar.
This is Contract section. In the time of scrolling, look into the navigation bar.</p>
</div>
<div id="about-us">
<h1>About us</h1>
<p>This is about us section. In the time of scrolling, look into the navigation bar.
This is about us section. In the time of scrolling, look into the navigation bar.
This is about us section. In the time of scrolling, look into the navigation bar.</p>
</div>
</div>
</div>
</div>
</body>
</html>
ফলাফল