in resizing the page, side bar goes under the main content (sometimes)

[zahrasa]

Hi!
First, thank you for your code. when i was searching, i end up with the plugin results. finally i find it just here.
About the problem, sometimes in inspect element when i change the width of the page suddenly the sidebar goes under the main content or sticks to the border of the page. totally size of side bar ruins.
ps: i use bootstrap version 4
i really need your help.

[BenMorel]

Hi, can you give a reproducible example?

[zahrasa]

<section class="container">
<div class="row"> 
<div class="scroll col-xl-3 col-md-4 d-none d-md-block right-side" style="padding-left: 6px;
    padding-right: 3.8px;">
<div class="theiaStickySidebar">
   <div class="red" style="background-color:red ; height:1000px">right side bar
   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>      
</div>
</div>


<!-- main content-->
<div class="scroll col-xl-6 col-md-8 col-sm-12 col-12 post-area">  
<div class="theiaStickySidebar">
 <div class="blue" style="height:3000px ; background-color:blue"></div>
  </div>   
    </div>
    <!--end of end of main content -->
  
 
<div class="scroll col-xl-3 d-none d-xl-block left-sidebar" style="padding-left:3.8px ; padding-right:6px">
     <div class="theiaStickySidebar"> 
     <div class="yellow" style="background-color:yellow ; height:600px">left side bar
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
   </div>
</div>

</div>
</section>



<div class="container">
<div class="row">
<div class="col-sm-12 d-none d-md-block">
<div class="orange" style="background-color:orange ; height:1000px"></div>
</div>
</div>

</div>

and

<script>        
            $(document).ready(function() {
                $('section.container .scroll').theiaStickySidebar();
            });
        </script>

P.S: i use inspect element in chrome and choose ipad mini. then i scroll down till the end of page and click the rotate button and then scroll up. in this case the red side bar moves right and left and makes me crazy.