বুটস্ট্রাপ জেএস স্ক্রলস্পাই রেফারেন্স - bootstrap JS Scrollspy Reference

বুটস্ট্রাপ JS স্ক্রলস্পাই (scrollspy.js)

স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টের লিঙ্ককে স্বয়ংক্রিয়ভাবে আপডেট করার জন্য বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন ব্যবহার করা হয়।

বুটস্ট্রাপ স্ক্রলস্পাই সম্পর্কে জানতে বুটস্ট্রাপ স্ক্রলস্পাই টিউটোরিয়ালটি পড়ুন।

টিপসঃ স্ক্রলস্পাই প্লাগ-ইন প্রায়ই এফিক্স প্লাগ-ইনের সাথে ব্যবহার করা হয়।

বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম

যেই এলিমেন্টে স্ক্রলস্পাই ব্যবহার করবেন ঐ এলিমেন্টের মধ্যে data-spy="scroll" এট্রিবিউটটি যুক্ত করুন (বেশিরভাগ ক্ষেত্রে <body> এলিমেন্টেই ইহা ব্যবহার করা হয়)।

তারপর data-target এট্রিবিউটের সাথে id এর ভ্যালু অথবা ন্যাভিগেশন বারের (.navbar) ক্লাসের নাম যোগ করি। ইহা ন্যাভবারের সাথে স্ক্রল এরিয়ার কানেকশন তৈরি করে।

ন্যাভবারের লিস্ট আইটেমের ID এবং স্ক্রল এরিয়ার ID একই হতে হবে (<div id="section1"> ও <a href="#section1"> এর ID একই)।

যখন স্ক্রল করা হয়, অপশনাল data-offset এট্রিবিউটটি স্ক্রলের সময় উপরের থেকে কত পিক্সেল নিচে নামবে তা নির্দেশ করে। যখন আপনার মনে হবে ন্যাভবারের একটিভ স্ট্যাট স্ক্রল এলিমেন্টের সাপেক্ষে খুব দ্রুত অথবা খুব ধীরগতিতে পরিবর্তন হচ্ছে তখন এই অপশন খুব গুরুত্বপূর্ন ভূমিকা পালন করবে। ডিফল্ট ভ্যালু ১০ পিক্সেল।

রিলেটিভ পজিশনিং বাধ্যতামূলকঃ data-spy="scroll" যুক্ত এলিমেন্টটিতে সিএসএস এর position প্রোপার্টি ব্যবহার করা বাধ্যতামূলক, ঠিকভাবে কাজ করার জন্য এর মান "relative" সেট করতে হবে।

উদাহরণ

<!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>

ফলাফল

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

জাভাস্ক্রিপ্টের সাহায্যে সক্রিয় করার জন্যঃ

উদাহরণ

<!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>

		<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>

    <script>
    $(document).ready(function(){
        $('body').scrollspy({target: ".navbar", offset: 50});
    });
    </script>

     </body>
</html>

ফলাফল

বুটস্ট্রাপ স্ক্রলস্পাই এর অপশন

অপশন ডাটা এট্রিবিউট অথবা জাভাস্ক্রিপ্টের মাধ্যমে অতিক্রম করতে পারে। ডাটা এট্রিবিউটের ক্ষেত্রে data-* নামের সাথে অপশনের নাম যুক্ত করা হয়, যেমন data-offset=""

নাম	টাইপ	ডিফল্ট	বর্ণনা
`offset`	`number`	`10`	ন্যাভবারের সাথে লিংককৃত সেকশন বা এলিমেন্টের কতো পিক্সেলের মধ্যে স্ক্রলস্পাই একটিভ হবে তা নির্দেশ করে। এটি অপশনাল। ডিফল্ট ভ্যালু হচ্ছে ১০ পিক্সেল। আগের উদাহরণটিতে `data-offset` এট্রিবিউটটি ব্যবহার করা হয়েছে।

আরো উদাহরণ

বুটস্ট্রাপ এ্যানিমেশনযুক্ত স্ক্রলস্পাই

একই পেজের মধ্যে স্মুথ(smooth) পেজ স্ক্রল যেভাবে যোগ করবেনঃ

উদাহরণ

<!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>

        <script>
        $(document).ready(function(){
          $('body').scrollspy({target: ".navbar", offset: 50});
          $("#navbarId a").on('click', function(event) {
            if (this.hash !== "") {
              event.preventDefault();

              var hash = this.hash;

              $('html, body').animate({
                scrollTop: $(hash).offset().top
              }, 800, function(){
          
                window.location.hash = hash;
              });
            }  
          });
        });
        </script>

     </body>
</html>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

বুটস্ট্রাপ টিউটোরিয়াল

সিএসএস কম্পোনেন্ট

JS কম্পোনেন্ট

বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ রেফারেন্স

বুটস্ট্রাপ জেএস স্ক্রলস্পাই রেফারেন্স - bootstrap JS Scrollspy Reference

বুটস্ট্রাপ JS স্ক্রলস্পাই (scrollspy.js)

বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম

উদাহরণ

ফলাফল

বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম

উদাহরণ

ফলাফল

বুটস্ট্রাপ স্ক্রলস্পাই এর অপশন

আরো উদাহরণ

বুটস্ট্রাপ এ্যানিমেশনযুক্ত স্ক্রলস্পাই

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য