*{margin:0; padding:0;}
.wrap{width:1100px; margin:0 auto;}
.header{height:200px; background:palegreen;}
.content{position:relative;}
.content:after{display:block; clear:both; content:'';}
.main{float:left; margin-right:10px; background:skyblue; width:790px; height:1500px;}
.wing{overflow:hidden;}
.wing .inner{width:300px; height:300px; background:plum;}
.wing.fixed .inner{position:fixed; top:0;}

const content = document.querySelector('.content');
const wing = document.querySelector('.wing');

// 컨텐츠 영역부터 브라우저 최상단까지의 길이 구하기
const contentTop = content.getBoundingClientRect().top + window.scrollY;

window.addEventListener('scroll', function(){
  if(window.scrollY >= contentTop){
    wing.classList.add('fixed');
  }else{
    wing.classList.remove('fixed');
  }
});