column fixed and starts after scrolling

I want create site witch will have 3 col like this site: http://www.because.tv/ see ATTACHMENT photo

But i have one problem How can create scroll fix cols like this , http://www.because.tv/ . if you open site and scroll down column 1 is scrolling after small scroll down column 2 start scroll to and then column 3. can i do this with canvas or can you Give me advice to search

thank you

pic

mypic

I find this : https://www.bootply.com/8vHdIkVV5x#
this is bootstrap 3-Column Layout with Affix but why it is not working on canvas ?

#midCol.affix-top {
    position:fixed;
  	margin-left:-18px;
  	margin-right:10px;
}

#midCol.affix-bottom {
	position:static;
}

#midCol.affix {
    position:static;
}

@media (max-width:1190px) {
  .affix,.affix-top,#midCol.affix,#midCol.affix-top {
      position:static;
  }
}

support?

and how can i use position: sticky for col ?

                
        
            
                
                
                
                    111
                    222
                    333
                
 
                
            
        

i am trying use this https://codepen.io/anon/pen/OXzoNJ but it is not working. can you help make sticky col on

                
        
            
                
                
                
                    111
                    222
                    333