boostrap sticky problemi

Merhaba, boostrap ile bir contentin içerisinde 2 tane col bulunuyor bunlar yan yana dizili birisi sidebar olarak kullanılıyor diğeri ise içerik alanı. kaydırma işlemi yapıldıkça sidebarın scroll ile hareket etmesini istiyorum ama verdiğim position stickylerin hiç bir etkisi olmuyor bu col içerisindeki sidebara bu olayı nasıl çözebilirim acaba

örnek kod

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-9 col-md-12 order-lg-1">
        <div class="row">
          
          
          <div class="col-lg-4 col-sm-6 mb-4">
            <div class="service-item style-2 border border-box">
              <div class="service-img position-relative overflow-hidden">
                <img class="img-fluid" src="images/anti-tacks-sstock-759939532.jpg" alt="">
                <a class="link-btn" href="biochemistry-solution.html"><i class="las la-link"></i></a>
              </div>
              <div class="service-desc shadow-none custom-height overflow-hidden">
                <div class="service-title">
                  <h4 class="text-center">Antı-Tacks (Batch-off Sabunları) (Yapışma Önleyici)</h4>
                </div>
                <p class="text-center">We have put protocols to protect our patients and staff care.</p>
                <div class="service-icon text-center"> <i class="flaticon-research"></i></div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="col-lg-3 col-md-12 sidebar mt-6 mt-lg-0">
        <div class="widget product-categories widget-categories border">
          <h4 class="widget-title mb-0 p-4">Ürünler</h4>
          <nav class="navbar navbar-expand-lg navbar-light bg-white">
            <div class="collapse navbar-collapse " id="navbarNav">
              <ul class="navbar-nav d-flex flex-column mb-4">
                <li class="nav-item dropdown">
                  <a class="nav-link lh-lg" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Antı-Tacks (Batch-off Sabunları) (Yapışma Önleyici)
                  </a>
                  <hr class="solid">
                </li>
              </ul>
            </div>
          </nav>
    </div>
      

        </div>

      </div>
    </div>
  </div>
</section>

side kısmına sticky-top vererek denerseniz olacaktır. daha doğrusu sabit kalmasını istediğiniz alana sticky-top vereceksiniz.

<section>
<div class="container">
<div class="row">
<div class="col-lg-9 col-md-12 order-lg-1 sticky-top">
<div class="row">


<div class="col-lg-4 col-sm-6 mb-4">
<div class="service-item style-2 border border-box">
<div class="service-img position-relative overflow-hidden">
<img class="img-fluid" src="images/anti-tacks-sstock-759939532.jpg" alt="">
<a class="link-btn" href="biochemistry-solution.html"><i class="las la-link"></i></a>
</div>
<div class="service-desc shadow-none custom-height overflow-hidden">
<div class="service-title">
<h4 class="text-center">Antı-Tacks (Batch-off Sabunları) (Yapışma Önleyici)</h4>
</div>
<p class="text-center">We have put protocols to protect our patients and staff care.</p>
<div class="service-icon text-center"> <i class="flaticon-research"></i></div>
</div>
</div>
</div>

</div>
</div>
<div class="col-lg-3 col-md-12 sidebar mt-6 mt-lg-0">
<div class="widget product-categories widget-categories border">
<h4 class="widget-title mb-0 p-4">Ürünler</h4>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav d-flex flex-column mb-4">
<li class="nav-item dropdown">
<a class="nav-link lh-lg" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Antı-Tacks (Batch-off Sabunları) (Yapışma Önleyici)
</a>
<hr class="solid">
</li>
</ul>
</div>
</nav>
</div>


</div>

</div>
</div>
</div>
</section>

sticky-top ın bir etkisi olmadı kullandığım template ile alakalı olabilir mi, çünkü headerdeki nav için benzer bir şey kullanılmış ama
sticky-top kullanılmamış

aynı anda aside ve header'da kullanılabilir. header kaç pixel ise şunu da ekleyebilirsiniz. kaymasını istemediğiniz alana.

style="height:calc(100vh - 60px); top: 60px; (60px örnek bir değer)

sayfa geneline <div class="page-wrapper"> verilmiş hocam, onun içinde de overflow-x: hidden; varmış onu kaldırınca sorunum çözüldü hocam. ilgin için teşekkür ederim