here's the code sketched https://jsfiddle.net/u1snnqvt/

html:

 <div class="clearfix"> <div class="sidebar"> <ul> <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. </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? </div>

css:

 .sidebar { position: fixed; top: 0; width: 30%; float: left; } .content { width: 70%; float:right; } .clearfix:after { content: ""; display: table; clear: both; }

given: there is a sidebar with position: fixed, to the right of it is content, below the whole thing is a footer. the problem is that if you set the height of the visible area of ​​the screen less than the height of the sidebar + footer, then the following will happen when the scroll is over: the footer will move up, will over the sidebar and block it.

but you need to make sure that the footer stops (!) before the sidebar and does not run into him (and apparently they should both continue to move further, but how, if the sidebar is fixed ...). I have already tried this way, but the solution is not given. I hope for your help, thanks in advance!

  • tin, as it comes to your head) Change the block to absolute and count to 70% of the height from the top. When it reaches the mark stop changing the top value of the block - Vasily Barbashev
  • @ Vasily Barbashev thanks for the prompt reply! did not quite understand what you mean. If you make position: absolute and change the value of top with each scrolling event, then you will need to stop changing the top at the moment when the upper border of the footer reaches the lower border of the sidebar. but how to implement it? if anyone can quickly write, I will be very grateful! - Oner Ksor
  • Well, this is just ordinary mathematics :) Now I will try - Vasily Barbashev

1 answer 1

For example:

 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>

But there is still something to improve.

Jsfiddle example

  • slightly redid and added to the project, everything worked! Thank you very much. the only mistake is that if the sidebar does not fit entirely on the screen, then it will still start scrolling only after its edge touches the edge of the footer. but I would like to realize that in the case when the height of the visible area is less than the sidebar, it will scroll to its last point, after which it will stop and continue scrolling only with the footer. Can you imagine how this can be done? - Oner Ksor
  • you can do this: var curHeight = window.innerHeight we know the height of the current browser window. compare with sidebarHeight. if the height of the monitor is less, then set position: relative until it reaches the bottom of the sidebar. but again, I find it difficult to realize it .. - Oner Ksor
  • @OnerKsor well, this is only a part, you can finish it yourself) My task is to push the true path) - Vasily Barbashev