Menu accompanies content on screen scrolling

Question

In OLX has a menu on the left side that after certain scrolling the same accompanies the content: https://pr.olx.com.br/roupas-e-calcados/calcas?cond=1

The current HTML developed with Twitter-Bootstrap 3 is like this:

<div class='col-xs-12 col-sm-12 col-md-3 col-lg-4'>
    <div class='box-menu'>
        <ul class='menu'>
           <li>...</li>
        </ul>
    </div>
</div>

<div class='col-xs-12 col-sm-12 col-md-9 col-lg-8'>
    [conteudo]
</div>

Xpx Apóx scrolling, how to achieve this effect?

I tried two ways, the first one was suggested in w3schools, more laborious and seemed to solve my problem.

The second was using css properties, but I was unsuccessful.

The menu stays fixed and doesn’t move.

Before marking as duplicate, I’ve seen some publications on Sopt but are incomplete.

Here they just pasted the JS code that applies the class, tried to explain how to do with CSS but nothing concrete, no examples. /questions/254053/menu-fixo-ap%C3%b3s-scrolling

Here the publisher himself solved and answered the correction with incomplete code. Menu Fixed Scroll Top

This other jsfiddle has several bugs /questions/129367/menu-fixo-com-jquery-determinada-scroll-scroll-da-p%C3%a1gina? noredirect=1&lq=1

The other menu is assigned as fixed permanent. /questions/365971/menu-lateral-fixo-na-leftcom-conte%C3%bado-na-right