Source

স্ক্ৰলস্পাই

স্ক্ৰ'ল অৱস্থানৰ ওপৰত ভিত্তি কৰি বুটষ্ট্ৰেপ নেভিগেচন বা তালিকা গোট উপাদানসমূহ স্বয়ংক্ৰিয়ভাৱে আপডেইট কৰিবলে কোনটো সংযোগ বৰ্তমানে দৰ্শনপৰ্টত সক্ৰিয়।

কেনেকৈ কাম কৰে

Scrollspy সঠিকভাৱে কাম কৰিবলৈ কেইটামান প্ৰয়োজনীয়তা আছে:

  • যদি আপুনি আমাৰ জাভাস্ক্রিপ্ট উৎসৰ পৰা নিৰ্মাণ কৰি আছে, ইয়াৰ বাবে প্ৰয়োজনutil.js ।
  • ইয়াক এটা Bootstrap nav অংশ বা তালিকা গোটত ব্যৱহাৰ কৰিব লাগিব ।
  • Scrollspy ৰ প্ৰয়োজন position: relative;আপুনি চোৰাংচোৱাগিৰি কৰা উপাদানটোৰ ওপৰত, সাধাৰণতে <body>.
  • ৰ বাহিৰে অন্য উপাদানৰ ওপৰত চোৰাংচোৱাগিৰি কৰাৰ সময়ত , এটা ছেট আৰু প্ৰয়োগ <body>কৰাটো নিশ্চিত কৰক ।heightoverflow-y: scroll;
  • এংকৰ ( <a>) ৰ প্ৰয়োজন আৰু তাৰ সৈতে এটা উপাদানলৈ আঙুলিয়াব লাগিব id.

যেতিয়া সফলভাৱে প্ৰণয়ন কৰা হয়, আপোনাৰ nav বা তালিকা গোটে সেই অনুসৰি আপডেইট কৰিব, .activeশ্ৰেণীটোক এটা বস্তুৰ পৰা পৰৱৰ্তীলৈ সিহতৰ সংশ্লিষ্ট লক্ষ্যসমূহৰ ওপৰত ভিত্তি কৰি স্থানান্তৰ কৰি।

navbar ত উদাহৰণ

navbar ৰ তলৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী সলনি হোৱাটো চাওক। ড্ৰপডাউন বস্তুবোৰো হাইলাইট কৰা হ’ব।

@শকত

বিজ্ঞাপন লেগিংছ keytar, ব্ৰাঞ্চ আইডি আৰ্ট পাৰ্টি dolor labore. Pitchfork yr enim lo-fi আগতে তেওঁলোকে qui বিক্ৰী হৈ গৈছিল। টাম্বলাৰ ফাৰ্মৰ পৰা টেবুললৈ চাইকেলৰ অধিকাৰ যিয়েই নহওক কিয়। Anim keffiyeh কাৰ্লছ কাৰ্ডিগান। Velit seitan mcsweeney এর ফটো বুথ 3 পহু চন্দ্ৰ irure. 'কচবি চুৱেটাৰ লোমো জিন শ্বৰ্ট', উইলিয়ামছবাৰ্গ হুডি মিনিম কুই আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই et cardigan trust fund culpa biodiesel wes anderson aesthetic. নিহিল টেটু কৰা accusamus, cred বিদ্ৰুপ বায়'ডিজেল keffiyeh শিল্পী ullamco consequat.

@mdo

ভেনিয়াম মাৰ্ফা গোঁফ স্কেটবৰ্ড, adipisicing fugiat velit pitchfork দাড়ি। ফ্ৰীগান দাড়ি aliqua cupidatat mcsweeney's vero. কুপিডাট চাৰি লোকো নিচি, ইএ হেলভেটিকা ​​নুলা কাৰ্লেছ। টেটু কৰা কচবি চুৱেটাৰ খাদ্য ট্ৰাক, mcsweeney's quis non freegan vinyl. লো-ফাই ৱেছ এণ্ডাৰ্ছন +১ চাৰ্টৰিয়েল। কাৰ্লেছৰ নন নান্দনিক ব্যায়াম quis gentrify. ব্ৰুকলিন adipisicing ক্ৰাফ্ট বিয়েৰ ভাইচ keytar deserunt.

এক

Occaecat কমোডো এলিকুৱা ডেলেক্টাছ। Fap ক্ৰাফ্ট বিয়েৰ deserunt স্কেটবোৰ্ড ea. লোমো চাইকেলৰ অধিকাৰ adipisicing banh mi, velit ea sunt পৰৱৰ্তী স্তৰ locavore একক-উৎপত্তি কফি in magna veniam. হাই লাইফ আইডি ভিনাইল, ইকো পাৰ্ক consequat quis aliquip banh mi pitchfork. ভেৰো ভিএইচএছ এষ্ট adipisicing. Consectetur nisi DIY নূন্যতম বাৰ্তাবাহক বেগ। ক্ৰেড এক্স ইন, বহনক্ষম delectus consectetur fanny pack iphone.

দুই

ইনচিডিডান্ট ইকো পাৰ্কত, অফিচিয়া ডেচেৰন্ট মেকছৱিনীৰ প্ৰাইডেণ্ট মাষ্টাৰে থাণ্ডাৰকেটছ চেপিয়েণ্টে ভেনিয়াম পৰিষ্কাৰ কৰে। ভিএইচএছ অভিজাত, proident shoreditch +1 বায়'ডিজেল laborum ক্ৰাফ্ট বিয়েৰ ব্যতিক্ৰম. একক-উৎপত্তি কফি wayfarers irure চাৰি লোকো, cupidat টেৰী richardson মাষ্টাৰ পৰিষ্কাৰ. আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই আৰ্ট পাৰ্টি ফেনী পেক, টেটু কৰা নুলা কাৰ্ডিগান টেম্পৰ এড। Proident পহু nesciunt sartorial keffiyeh ইউ বানহ মি বহনক্ষম. এলিট পহু voluptate, lo-fi ea portland আগতে তেওঁলোকে চাৰি লোকো বিক্ৰী শেষ. Locavore enim nostrud mlkshk ব্ৰুকলিন নেচচিউন্ট।

তিনি

বিজ্ঞাপন লেগিংছ keytar, ব্ৰাঞ্চ আইডি আৰ্ট পাৰ্টি dolor labore. Pitchfork yr enim lo-fi আগতে তেওঁলোকে qui বিক্ৰী হৈ গৈছিল। টাম্বলাৰ ফাৰ্মৰ পৰা টেবুললৈ চাইকেলৰ অধিকাৰ যিয়েই নহওক কিয়। Anim keffiyeh কাৰ্লছ কাৰ্ডিগান। Velit seitan mcsweeney এর ফটো বুথ 3 পহু চন্দ্ৰ irure. 'কচবি চুৱেটাৰ লোমো জিন শ্বৰ্ট', উইলিয়ামছবাৰ্গ হুডি মিনিম কুই আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই et cardigan trust fund culpa biodiesel wes anderson aesthetic. নিহিল টেটু কৰা accusamus, cred বিদ্ৰুপ বায়'ডিজেল keffiyeh শিল্পী ullamco consequat.

Keytar twee blog, culpa মেচেঞ্জাৰ বেগ মাৰ্ফা যিয়েই নহওক delectus খাদ্য ট্ৰাক। চেপিয়েন্টে চিনথ আইডি এছুমেণ্ডা। Locavore sed helvetica cliche বিদ্ৰুপ, thundercats আপুনি হয়তো তেওঁলোকৰ বিষয়ে শুনা নাই consequat hoodie গ্লুটেন-মুক্ত lo-fi fap aliquip. টেৰী ৰিচাৰ্ডছন প্ৰাইডেন্ট ব্ৰাঞ্চ nesciunt quis cosby চুৱেটাৰ pariatur keffiyeh ut helvetica শিল্পী. কাৰ্ডিগান ক্ৰাফ্ট বিয়েৰ seitan ৰেডিমেড velit. ভিএইচএছ চেম্ব্ৰে লেবৰিছ টেম্পৰ ভেনিয়াম। এনিম মলিট মিনিম কমোডো উলামকো থাণ্ডাৰকেটছ।

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

nested nav ৰ সৈতে উদাহৰণ

.navScrollspy এ nested s ৰ সৈতেও কাম কৰে । যদি এটা নেষ্টেড .navহয় .active, তেন্তে ইয়াৰ পিতৃ - মাতৃও হ ' ব .active৷ navbar ৰ কাষৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী সলনি হোৱাটো চাওক।

বস্তু ১

'এক্স ক'ম'ড' এডিপিচিচিং ব্যায়াম aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. ডো অউটে ইপছাম ইপছাম উলামকো চিলাম কনচেক্টেটাৰ উট এট অউটে কনচেক্টেটাৰ লেবাৰ। ফুগিয়াট লেবৰাম ইনচিডিডন্ট টেম্প'ৰ ইউ কনচেকুৱেট এনিম ড'ল'ৰ প্ৰ'ইডেন্ট। 'এলিকুয়া আৰু এলিকুৱা অফিচিয়া কুইছ এট ইনচিডিডন্ট ভোলুপ্টেট নন এনিম ৰেপ্ৰেহেণ্ডেৰিট এডিপিচিচিং ড'ল'ৰ উট কনচেকুৱেট ডেচেৰন্ট মলিট ড'ল'ৰ। Aliquip nulla enim veniam নন fugiat আইডি কুপিডাট নুলা এলিট কুপিডাট কমোডো ভেলিট উট eiusmod কুপিডাট এলিট ড'ল'ৰ।

বস্তু ১-১

'আমেট টেম্প'ৰ মলিট এলিকুইপ পেৰিয়াটুৰ এক্সচেপ্টৰ কমোডো ড' ইএ চিলম কমোডো লৰেম আৰু অকাকেকেট এলিট কুই এট। 'আলিকিপ লেবাৰ' এক্স এক্স এসে ভলুপ্টেট অ'কেকেট লৰেম উল্লামকো ডেচেৰন্ট। এলিকুৱা চিলাম এক্সচেপ্টৰ irure consequat id quis ea. বহা proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat ইউ কমোডো fugiat নন কুইছ. এনিম aliquip ব্যায়াম ullamco adipisicing voluptate excepteur নূন্যতম ব্যায়াম নূন্যতম commodo adipisicing ব্যায়াম officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum এনিম আৰু ফুজিয়েট।

বস্তু ১-২

Cillum nisi deserunt magna eiusmod qui eiusmod ভেলিট voluptate পেৰিয়াটুৰ লেবাৰম ছুন্ট এনিম। ইৰুৰে লেবৰিছ মলিট কনচেকুৱেট ইনচিডিডেণ্ট চিণ্ট এট কালপা কুলপা ইনচিডিডেণ্ট এডিপিচিচিং মেগনা মেগনা অকেকেট। লাব্ৰে এনিম কনচেক্টেটাৰ ইয়া লেবাৰ এনিম কনচেক্টেটাৰ ইন লেবাৰ এনিম। Proident ullamco ipsum esse elit ut লৰেম ইইউছমড ডলৰ আৰু ইইউছমড। এনিম occaecat nulla নন কনসিকুৱেট eiusmod velit incididunt ত।

বস্তু ২

কুইছ মেগনা লৰেম এনিম এমেট ইপ্সম ড' মলিট চিট চিলাম ভোলুপ্টেট এক্স নলা টেম্প'ৰ। লেবৰাম কনচিকুৱেট নন এলিট এনিম ব্যায়াম চিলাম এলিকুৱা কনচিকুৱেট আইডি এলিকুৱা। 'এচে এক্স কনচেক্টেটাৰ মলিট ভোলুপ্টেট' এষ্ট ইন ডুইছ লেবাৰিছ এড ছিট ইপছুম এনিম লৰেম। ইনচিডিডন্ট ভেনিম ভেলিট এলিট এলিট ভেনিয়াম লৰেম এলিকুৱা কুইছ উলামকো ডিচেৰুন্ট বহা এনিম এলিট এলিকুৱা এছেছ ইৰিউৰে। লেবৰাম নিচি ছিট এষ্ট টেম্প'ৰ লেবাৰম মলিট লেবাৰ অফিচিয়ে লেবৰাম এক্সেপ্টৰ কমোডো নন কমোডো ড'লাৰ এক্সেপ্টৰ কমোডো। আইপছাম ফুজিয়েট এক্স এষ্ট কনচেক্টেটাৰ ইপছাম কমোডো টেম্প'ৰ ছান্ট ইন প্ৰ'ইডেণ্ট।

বস্তু ৩

কুইছ এনিম বহা ডো আমেট ফুগিয়াট ডলৰ ভেলিট বহা ea ea ডো reprehenderit culpa duis. নোষ্ট্ৰড এলিকুৱা ইপছাম ফুজিয়েট মিনিম প্ৰইডেন্ট অকেকেট এক্সচেপ্টৰ এলিকুইপ কুলপা অট টেম্প'ৰ ৰিপ্ৰেহেণ্ডেৰিট। ডেচেৰন্ট টেম্প'ৰ মলিট এলিট এক্স পেৰিয়াটুৰ ড'ল'ৰ ভেলিট ফুজিয়েট মলিট কুলপা ইৰুৰে উলামকো এষ্ট এক্স উলামকো এক্সচেপ্টৰ।

বস্তু ৩-১

Deserunt quis elit Lorem eiusmod amet এনিম এনিম amet মিনিম লৰেম proident nostrud. 'এই আইডি ড'ল'ৰ এনিম ব্যায়াম aute fugiat labore voluptate cillum do laboris labore. 'এক্স ভেলিট ব্যায়াম' nisi enim labore reprehenderit শ্ৰম nostrud ut ut. 'এসে অফিচিয়া ছুন্ট ডুইছ এলিকিপ উল্লামকো টেম্প'ৰ eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ব্যায়াম aliquip মিনিম এনিম culpa occaecat ব্যায়াম. 'এষ্ট টেম্প'ৰ এক্সচেপ্টৰ এলিকুইপ লেবাৰাম কনচেকুৱেট ড' ডেচেৰন্ট লেবাৰাম এসে ইউছমোড ইৰুৰ প্ৰ'ইডেন্ট ইপছাম এছে কুই।

বস্তু ৩-২

লেবাৰে বহা কুলপা কমোডো এলিট এডিপিচিচিং বহি এলিকুইপ এলিট প্ৰইডেন্ট ভোলুপ্টেট মিনিম মলিট নষ্ট্ৰড অউটে ৰিপ্ৰেহেণ্ডেৰিট কৰক। Mollit excepteur eu Lorem ipsum anim commodo sint labore ব্যায়াম ভেলিট incididunt ত লৰেম। 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ দ্বাৰা 'অ'কেকেট'ৰ 'কনচেক্টেটুৰ'ৰ' আছে'।' Aliquip consequat এড লেবৰে লেবাৰে মলিট উট আমেট। 'ভেনিয়াম কুলপা এলিকুৱা'ত বহিব।

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

list-group ৰ সৈতে উদাহৰণ

.list-groupScrollspy এ s ৰ সৈতেও কাম কৰে । তালিকা গোটৰ কাষৰ অঞ্চলটো স্ক্ৰল কৰক আৰু সক্ৰিয় শ্ৰেণী পৰিৱৰ্তন চাওক।

বস্তু ১

'এক্স ক'ম'ড' এডিপিচিচিং ব্যায়াম aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. ডো অউটে ইপছাম ইপছাম উলামকো চিলাম কনচেক্টেটাৰ উট এট অউটে কনচেক্টেটাৰ লেবাৰ। ফুগিয়াট লেবৰাম ইনচিডিডন্ট টেম্প'ৰ ইউ কনচেকুৱেট এনিম ড'ল'ৰ প্ৰ'ইডেন্ট। 'এলিকুয়া আৰু এলিকুৱা অফিচিয়া কুইছ এট ইনচিডিডন্ট ভোলুপ্টেট নন এনিম ৰেপ্ৰেহেণ্ডেৰিট এডিপিচিচিং ড'ল'ৰ উট কনচেকুৱেট ডেচেৰন্ট মলিট ড'ল'ৰ। Aliquip nulla enim veniam নন fugiat আইডি কুপিডাট নুলা এলিট কুপিডাট কমোডো ভেলিট উট eiusmod কুপিডাট এলিট ড'ল'ৰ।

বস্তু ২

কুইছ মেগনা লৰেম এনিম এমেট ইপ্সম ড' মলিট চিট চিলাম ভোলুপ্টেট এক্স নলা টেম্প'ৰ। লেবৰাম কনচিকুৱেট নন এলিট এনিম ব্যায়াম চিলাম এলিকুৱা কনচিকুৱেট আইডি এলিকুৱা। 'এচে এক্স কনচেক্টেটাৰ মলিট ভোলুপ্টেট' এষ্ট ইন ডুইছ লেবাৰিছ এড ছিট ইপছুম এনিম লৰেম। ইনচিডিডন্ট ভেনিম ভেলিট এলিট এলিট ভেনিয়াম লৰেম এলিকুৱা কুইছ উলামকো ডিচেৰুন্ট বহা এনিম এলিট এলিকুৱা এছেছ ইৰিউৰে। লেবৰাম নিচি ছিট এষ্ট টেম্প'ৰ লেবাৰম মলিট লেবাৰ অফিচিয়ে লেবৰাম এক্সেপ্টৰ কমোডো নন কমোডো ড'লাৰ এক্সেপ্টৰ কমোডো। আইপছাম ফুজিয়েট এক্স এষ্ট কনচেক্টেটাৰ ইপছাম কমোডো টেম্প'ৰ ছান্ট ইন প্ৰ'ইডেণ্ট।

বস্তু ৩

কুইছ এনিম বহা ডো আমেট ফুগিয়াট ডলৰ ভেলিট বহা ea ea ডো reprehenderit culpa duis. নোষ্ট্ৰড এলিকুৱা ইপছাম ফুজিয়েট মিনিম প্ৰইডেন্ট অকেকেট এক্সচেপ্টৰ এলিকুইপ কুলপা অট টেম্প'ৰ ৰিপ্ৰেহেণ্ডেৰিট। ডেচেৰন্ট টেম্প'ৰ মলিট এলিট এক্স পেৰিয়াটুৰ ড'ল'ৰ ভেলিট ফুজিয়েট মলিট কুলপা ইৰুৰে উলামকো এষ্ট এক্স উলামকো এক্সচেপ্টৰ।

বস্তু ৪

কুইছ এনিম বহা ডো আমেট ফুগিয়াট ডলৰ ভেলিট বহা ea ea ডো reprehenderit culpa duis. নোষ্ট্ৰড এলিকুৱা ইপছাম ফুজিয়েট মিনিম প্ৰইডেন্ট অকেকেট এক্সচেপ্টৰ এলিকুইপ কুলপা অট টেম্প'ৰ ৰিপ্ৰেহেণ্ডেৰিট। ডেচেৰন্ট টেম্প'ৰ মলিট এলিট এক্স পেৰিয়াটুৰ ড'ল'ৰ ভেলিট ফুজিয়েট মলিট কুলপা ইৰুৰে উলামকো এষ্ট এক্স উলামকো এক্সচেপ্টৰ।

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

ব্যৱহাৰ

ডাটা এট্ৰিবিউটৰ জৰিয়তে

আপোনাৰ শীৰ্ষবাৰ নেভিগেচনত সহজে scrollspy আচৰণ যোগ কৰিবলে, data-spy="scroll"আপুনি চোৰাংচোৱাগিৰি কৰিব বিচৰা উপাদানত যোগ কৰক (বেছিভাগ সাধাৰণতে এইটো হ'ব <body>)। data-targetতাৰ পিছত যিকোনো Bootstrap উপাদানৰ মূল উপাদানৰ ID বা শ্ৰেণীৰ সৈতে বৈশিষ্ট্য যোগ কৰক .nav।

body {
  position: relative;
}
<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

জাভাস্ক্রিপ্টৰ জৰিয়তে

আপোনাৰ CSS ত যোগ কৰাৰ পিছত position: relative;, জাভাস্ক্রিপ্টৰ যোগেদি scrollspy কল কৰক:

$('body').scrollspy({ target: '#navbar-example' })

সমাধানযোগ্য আইডি লক্ষ্যৰ প্ৰয়োজন

Navbar সংযোগসমূহৰ সমাধানযোগ্য id লক্ষ্য থাকিব লাগিব। উদাহৰণস্বৰূপে, a <a href="#home">home</a>DOM ত থকা কিবা এটাৰ সৈতে মিল খাব লাগিব যেনে <div id="home"></div>.

অলক্ষ্য :visibleউপাদানসমূহক আওকাণ কৰা হৈছে

:visiblejQuery অনুসৰি নথকা লক্ষ্য উপাদানসমূহক আওকাণ কৰা হ'ব আৰু সিহতৰ সংশ্লিষ্ট nav বস্তুসমূহ কেতিয়াও হাইলাইট কৰা নহ'ব।

পদ্ধতিসমূহ

.scrollspy('refresh')

DOM ৰ পৰা উপাদানসমূহ যোগ বা আঁতৰোৱাৰ সৈতে scrollspy ব্যৱহাৰ কৰাৰ সময়ত, আপুনি সতেজ পদ্ধতিক এনেদৰে কল কৰিব লাগিব:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

এটা উপাদানৰ স্ক্ৰলস্পাই ধ্বংস কৰে।

বিকল্পসমূহ

বিকল্পসমূহ ডাটা এট্ৰিবিউট বা জাভাস্ক্রিপ্টৰ যোগেদি পাছ কৰিব পাৰি। তথ্য বৈশিষ্ট্যসমূহৰ বাবে, বিকল্পৰ নাম ত সংযুক্ত কৰক data-, যেনে data-offset="".

নাম প্ৰকাৰ ডিফল্ট বিৱৰণ
অফছেট সংখ্যা ১০ স্ক্ৰলৰ অৱস্থান গণনা কৰাৰ সময়ত ওপৰৰ পৰা অফছেট কৰিবলৈ পিক্সেলসমূহ।
প্রণালী তাঁৰ অটো স্ক্ৰল autoস্থানাংক পাবলৈ সৰ্বোত্তম পদ্ধতি বাছি ল'ব। offsetস্ক্ৰল স্থানাংক পাবলৈ jQuery অফছেট পদ্ধতি ব্যৱহাৰ কৰিব। positionস্ক্ৰল স্থানাংক পাবলৈ jQuery অৱস্থান পদ্ধতি ব্যৱহাৰ কৰিব।
লক্ষ্য তাঁৰ Scrollspy প্লাগইন প্ৰয়োগ কৰিবলে উপাদান ধাৰ্য্য কৰে।

ইভেন্টসমূহ

ইভেন্টৰ ধৰণ বিৱৰণ
সক্ৰিয় কৰক.bs.scrollspy এই ইভেন্টটো স্ক্ৰল উপাদানত গুলিয়াই দিয়ে যেতিয়াই এটা নতুন বস্তু স্ক্ৰলস্পাইৰ দ্বাৰা সক্ৰিয় হয়। 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})