var sidebar = document.getElementById('sidebar');
var sidebarH = sidebar.clientHeight;
var content = document.querySelector('.content').clientHeight;
var except = (content - sidebarH);
document.addEventListener('scroll', function(e) {
var newScrollTop = e.target.scrollingElement.scrollTop;
if (except >= newScrollTop) {
sidebar.style.top = newScrollTop + 'px';
}
});
.sidebar {
position: absolute;
top: 0;
width: 30%;
float: left;
}
.content {
width: 70%;
float: right;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="clearfix">
<div class="sidebar" id="sidebar">
<ul>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
<li>lorem ipsum</li>
</ul>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus nulla quibusdam dolorem voluptatum doloremque perspiciatis sapiente sit, aliquid vitae. Vel magni, minus fugit tempora asperiores quibusdam ratione, labore quasi dolores ipsam, eaque quis
adipisci quae velit hic cum provident nihil quos officiis rem nisi repudiandae minima! Eligendi ipsa aspernatur facere, dolorem nihil eius dolor excepturi porro nesciunt perspiciatis, dolores accusantium laudantium a asperiores voluptatum nemo iste,
minus deserunt. Praesentium sunt, ea dicta. Sed, nihil voluptates ipsam quos pariatur, quidem nam, cum iure, provident maiores eius nobis libero commodi saepe excepturi molestias fuga nulla dolorum. Dolorum, nisi voluptatibus laudantium. Fuga ducimus
maxime, nulla, expedita consectetur ea obcaecati quas. Vitae omnis fugit minus alias fuga dignissimos delectus sed nisi pariatur nemo sit dolorem distinctio laboriosam optio, doloremque soluta, deserunt aliquid dolorum hic ullam modi aperiam voluptatum
unde! Deserunt necessitatibus doloribus esse nostrum autem voluptate obcaecati ducimus magnam id in dignissimos excepturi ab eos maiores natus praesentium laborum vel quibusdam, incidunt vero atque. Sint quis, labore, eum neque exercitationem nostrum
quos deleniti. Harum sunt delectus vero laudantium natus amet aspernatur provident debitis itaque deleniti quas voluptates, similique nostrum impedit nihil commodi explicabo necessitatibus quo aperiam? Laudantium voluptates molestias nihil cupiditate
ipsum, minus non dolorem totam dignissimos quos fuga magni, maxime, pariatur, harum voluptatem deserunt suscipit! Assumenda sunt aperiam fuga, ullam pariatur explicabo quidem ratione inventore obcaecati cumque, alias facere quaerat, ad! Hic repudiandae
laudantium optio. Ad harum corrupti explicabo iure dolor doloribus aliquam perspiciatis laborum magni voluptatem cupiditate a, in, animi dignissimos assumenda expedita sapiente, autem ipsum dicta! Minus et eveniet velit sint inventore saepe ad, eum
accusamus perferendis fuga modi dolorum in nihil qui voluptas minima vero atque libero ullam repudiandae omnis iusto reiciendis sapiente eius. Perspiciatis aut ratione ipsa minus animi, ea optio tempora maxime obcaecati eligendi veniam ullam ipsum
perferendis necessitatibus illum facilis cum error. Officia necessitatibus ullam iure nostrum, eveniet eligendi corporis! Iure, debitis? Adipisci numquam placeat ipsa, autem deserunt, incidunt amet quaerat corporis fuga, et doloremque laboriosam nobis
aperiam. Cupiditate sint amet quidem dolor, cum? Ut doloremque a hic numquam dignissimos repellat, odio quos repudiandae quaerat amet reprehenderit ullam nemo dolor, vero sed, earum totam recusandae modi voluptatum magnam. Ipsa nesciunt, officiis,
velit hic voluptatibus et ratione ipsum! Quos quibusdam ipsam exercitationem excepturi, atque libero. Dolore laudantium corporis temporibus, commodi a, quis pariatur esse quibusdam quo! Ipsa id eveniet possimus minus quam harum iste praesentium sed
culpa laudantium a, cupiditate. Quo eos, id eveniet a reprehenderit rerum natus asperiores maxime voluptatum alias expedita nulla, quas! Perspiciatis beatae modi est nemo provident accusantium sequi quisquam nam fuga quas ipsam pariatur consequuntur,
vero porro aspernatur saepe suscipit. Quia laudantium magni hic voluptatum atque, possimus, est rem veniam eligendi voluptates praesentium consectetur. Est illum sapiente ipsam sint necessitatibus, obcaecati atque enim cumque optio iusto explicabo
alias quo rem, reprehenderit incidunt repudiandae animi dolore doloribus earum, laudantium facilis autem. Temporibus, at provident sed inventore illum nemo impedit aspernatur animi optio quas repudiandae quibusdam velit illo fugit nihil maxime ipsum
quod dolor, voluptas?
</div>
</div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore explicabo laboriosam voluptatum aut culpa minima voluptatem et neque quis tempora numquam perferendis corrupti facilis, deleniti mollitia id non aspernatur? Quae reiciendis nisi optio pariatur
ex voluptatibus impedit facilis eligendi. Quibusdam soluta aperiam ut facere error eum repellat quas deleniti, perspiciatis, iusto numquam totam, sapiente nostrum harum. Amet ad nisi voluptatem possimus molestiae iure sapiente odit quos, praesentium
quo pariatur temporibus inventore cupiditate ullam quis eligendi accusamus veritatis reiciendis. Eaque esse totam provident alias? Consequatur tempore, commodi eligendi cumque et natus ex provident odio quo amet modi deserunt perspiciatis quos placeat?</div>
absolute
и считай до 70% высоты от верха. Когда оно дойдет до отметки переставай изменятьtop
значение у блока