Scrollspy ﻪﺑ ﯼﺍﺮﺑﺖﯿﻌﻗﻮﻣ ﺱﺎﺳﺍ ﺮﺑ ﺶﯾﺎﻤﯿﭘ ﺖﺳﺮﻬﻓ ﺭﺩ ﺎﻫﺪﻧﻮﯿﭘ ﺭﺎﮐﺩﻮﺧ ﯽﻧﺎﺳﺭﺯﻭﺭ <
:ﺪﻫﺩ ﯽﻣ ﻥﺎﺸﻧ ﺍﺭ Scrollspy ﺩﺎﺠﯾﺍ ﻩﻮﺤﻧ ﺮﯾﺯ ﻝﺎﺜﻣ
<!-- The scrollable area -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1 -->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>→ ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
data-bs-spy="scroll" ﺪﯿﻨﮐ ﻪﻓﺎﺿﺍ ﺩﻮﺷ ﻩﺩﺎﻔﺘﺳﺍ ﺶ
.ﺖﺳﺍ ﺶﯾﺎﻤﯿﭘ ﻞﺑﺎﻗ ﻪﯿﺣﺎﻧ ﻪﺑ ﯼﺮﺑﻭﺎﻧ ﺭﺍﻮﻧ ﻝﺎﺼﺗﺍ ﺯﺍ ﻥﺎﻨﯿﻤﻃﺍ ﯼﺍﺮﺑ ﻦﯾﺍ .( .ﺪﯿﻨ
.( .ﺖﺳﺍ ﻞﺴﮑﯿﭘ 10 ﺽﺮﻓ ﺶﯿﭘ .ﺪﻨﻫﺩ ﯽﻣ ﺮﯿﯿﻐﺗ ﺍﺭ ﻝﺎﻌﻓ ﺖﻟﺎﺣ ﺩﻭﺯ ﯽﻠﯿﺧ ﺎﯾ ﺩﻭﺯ ﯽﻠﯿﺧ ﺶﯾﺎﻤﯿﭘ ﺩﺭﺍﺩ ﺯﺎﯿﻧ ﯽﺒﺴﻧ ﺖﯿﻌﻗﻮﻣ ﻪﺑ: ﺎﺑ ﺮﺼﻨﻋ data-bs-spy="scroll" ﯽﮔﮋﯾﻭ <a href="#section1"> ﺩﺭﺍﺩ ﺖﻘﺑﺎﻄﻣ