اسکرول‌اسپای

<div class="bd-example">
    <div class="row">
        <div class="col-md-2 col-12">
            <div id="list-example" class="list-group">
                <a class="list-group-item list-group-item-action"
                    href="#list-item-01">آیتم 1</a>
                <a class="list-group-item list-group-item-action"
                    href="#list-item-02">آیتم
                    2</a>
                <a class="list-group-item list-group-item-action"
                    href="#list-item-03">آیتم
                    3</a>
                <a class="list-group-item list-group-item-action"
                    href="#list-item-04">آیتم
                    4</a>
            </div>
        </div>
        <div class="col-md-10 col-12">
            <div data-bs-spy="scroll" data-bs-target="#list-example"
                data-bs-smooth-scroll="true" class="scrollspy-example-3"
                tabindex="0">
                <h6 class="fw-medium" id="list-item-01">آیتم 1</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
                <h6 class="fw-medium" id="list-item-02">آیتم 2</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
                <h6 class="fw-medium" id="list-item-03">آیتم 3</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
                <h6 class="fw-medium" id="list-item-04">آیتم 4</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-3 col-sm-4">
        <nav id="navbar-example3"
            class="navbar bg-light flex-column align-items-stretch p-3">
            <nav class="nav nav-pills flex-column">
                <a class="nav-link" href="#item-1">آیتم 1</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link ms-3 my-1" href="#item-1-1">آیتم 1-1</a>
                    <a class="nav-link ms-3 my-1" href="#item-1-2">آیتم 1-2</a>
                </nav>
                <a class="nav-link" href="#item-2">آیتم 2</a>
                <a class="nav-link" href="#item-3">آیتم 3</a>
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link ms-3 my-1" href="#item-3-1">آیتم 3-1</a>
                    <a class="nav-link ms-3 my-1" href="#item-3-2">آیتم 3-2</a>
                </nav>
            </nav>
        </nav>
    </div>
    <div class="col-md-9 col-sm-8">
        <div data-bs-spy="scroll" data-bs-target="#navbar-example3"
            data-bs-smooth-scroll="true" tabindex="0" class="scrollspy-example-2">
            <div id="item-1">
                <h6 class="fw-medium">آیتم 1</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است </p>
            </div>
            <div id="item-1-1">
                <h6 class="fw-medium">آیتم 1-1</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
                </p>
            </div>
            <div id="item-1-2">
                <h6 class="fw-medium">آیتم 1-2</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
                </p>
            </div>
            <div id="item-2">
                <h6 class="fw-medium">آیتم 2</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
                </p>
            </div>
            <div id="item-3">
                <h6 class="fw-medium">آیتم 3</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز
                </p>
            </div>
            <div id="item-3-1">
                <h6 class="fw-medium">آیتم 3-1</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
            </div>
            <div id="item-3-2">
                <h6 class="fw-medium">آیتم 3-2</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است</p>
            </div>
        </div>
    </div>
</div>

<div class="bd-example">
    <div class="row">
        <div class="col-md-2 col-12">
            <div id="simple-list-example"
                class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
                <a class="p-2 rounded" href="#simple-list-item-1">آیتم 1</a>
                <a class="p-2 rounded" href="#simple-list-item-2">آیتم 2</a>
                <a class="p-2 rounded" href="#simple-list-item-3">آیتم 3</a>
                <a class="p-2 rounded" href="#simple-list-item-4">آیتم 4</a>
                <a class="p-2 rounded" href="#simple-list-item-5">آیتم 5</a>
            </div>
        </div>
        <div class="col-md-10 col-12">
            <div data-bs-spy="scroll" data-bs-target="#simple-list-example"
                data-bs-offset="0" data-bs-smooth-scroll="true"
                class="scrollspy-example-4" tabindex="0">
                <h6 class="fw-medium" id="simple-list-item-1">آیتم 1</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
                <h6 class="fw-medium" id="simple-list-item-2">آیتم 2</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
                <h6 class="fw-medium" id="simple-list-item-3">آیتم 3</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
                <h6 class="fw-medium" id="simple-list-item-4">آیتم 4</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
                <h6 class="fw-medium" id="simple-list-item-5">آیتم 5</h6>
                <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
            </div>
        </div>
    </div>
</div>

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3 mb-3">
    <ul class="nav nav-pills d-sm-flex d-block">
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading1">اول</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#scrollspyHeading2">دوم</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="javascript:void(0);"
                role="button" aria-expanded="false">فهرست کشویی</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#scrollspyHeading3">سوم</a></li>
                <li><a class="dropdown-item" href="#scrollspyHeading4">چهارم</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#scrollspyHeading5">پنجم</a></li>
            </ul>
        </li>
    </ul>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0"
    class="scrollspy-example bg-light p-3 rounded-2"
    data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" tabindex="0">

    <h6 class="fw-medium" id="scrollspyHeading1">عنوان اول</h6>
    <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است...</p>

    <h6 class="fw-medium" id="scrollspyHeading2">عنوان دوم</h6>
    <p class="text-muted">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ. این متن تنها برای نمایش ساختار کلی پاراگراف استفاده می‌شود...</p>

    <h6 class="fw-medium" id="scrollspyHeading3">عنوان سوم</h6>
    <p class="text-muted">لورم ایپسوم متن ساختگی است که برای پر کردن فضای خالی در طراحی‌ها و پروژه‌ها مورد استفاده قرار می‌گیرد...</p>

    <h6 class="fw-medium" id="scrollspyHeading4">عنوان چهارم</h6>
    <p class="text-muted">لورم ایپسوم برای شبیه‌سازی محتوا در صفحات وب، اپلیکیشن‌ها و قالب‌های چاپی کاربرد دارد...</p>

    <h6 class="fw-medium" id="scrollspyHeading5">عنوان پنجم</h6>
    <p class="text-muted">این متن معمولا بدون معنا است و هدف آن فقط نشان دادن ساختار و قالب کلی یک متن واقعی می‌باشد...</p>

</div>