Scrambled side panels on the page

 $(document).ready(function($) { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 10) { $(".item1,.item2").css({ "padding-top": "0" }); } else { $(".item1,.item2").css({ "padding-top": "100px" }); } }); }); 

 * { margin: 0; padding: 0; } .header { position: relative; height: 100px; background: red; z-index: 100; } .item1, .item2 { padding-top: 100px; transition: .2s; } .item1, .item2 { position: fixed; top: 0; width: 200px; height: 100vh; background: #fbfbfb; } .item1 { left: 0; } .item2 { right: 0; } .item { width: calc(100% - 450px); margin: auto; padding: 10px 40px; font-size: 26px; white-space: pre-wrap; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header"> this is header </div> <div class="item1"> левый блок </div> <div class="item2"> правый блок </div> <div class="item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, provident recusandae doloremque quisquam ut quis ex aliquid sit. Harum ipsa suscipit provident alias esse! Eaque facere molestiae est eveniet aliquid nostrum voluptatem aperiam labore, porro exercitationem omnis. Error, distinctio quidem sapiente ipsa repellat voluptatum eligendi provident, incidunt, iste eveniet eaque porro sunt vel blanditiis debitis laudantium vero culpa nulla nisi dolore maxime. Quo, vel. Officiis quam tempora eius possimus tempore facilis ipsam adipisci? Impedit, tempore doloremque minima neque eveniet minus! Officia eos omnis recusandae? Natus facilis fugiat assumenda veniam cum et quae ipsa laborum ea consectetur tenetur, dolorum eum praesentium ex molestiae quia officia nostrum, officiis consequuntur facere! Soluta expedita aperiam reprehenderit error dolorum ipsum autem repellendus sint minus quae, sed, accusantium aliquid hic atque veritatis eveniet esse, voluptates ab necessitatibus vero optio magnam? Suscipit sequi porro at earum voluptate dicta molestiae quo est voluptatibus, eligendi impedit quae fugit adipisci beatae commodi vero dignissimos tempore vel? Atque dolor aperiam porro similique eveniet, labore laboriosam iste blanditiis beatae in. Neque repudiandae aspernatur, eum quis atque accusantium deleniti dolorum fuga placeat. Quia dolores nemo eos officiis in, dicta repellendus nihil minima excepturi voluptatum necessitatibus veritatis sunt quas sapiente porro accusantium obcaecati! Sit perspiciatis necessitatibus quod dolore sapiente assumenda neque, nam non libero. Dolores facere harum necessitatibus fugiat debitis asperiores explicabo doloribus reprehenderit quaerat sunt commodi ad consequuntur, sequi at. Natus molestiae animi dignissimos, eligendi maxime maiores accusantium sint eveniet. Nulla odio ratione laborum odit eos magnam, eligendi repellendus reiciendis dolores nam tempora id, commodi quaerat labore, culpa quas voluptates molestias esse doloribus? Rerum veniam reiciendis magnam ducimus dolores id similique, optio, reprehenderit mollitia, nemo architecto pariatur odit eaque quis. Vel suscipit soluta ab non. Laudantium iste mollitia tempora facilis debitis repudiandae, odio tenetur natus ullam corrupti quae molestias, optio unde aliquam doloribus id rerum sapiente nihil! Nostrum ea, libero illo exercitationem expedita voluptates enim culpa cumque deserunt adipisci sequi rerum temporibus ex eius recusandae illum, vero ipsam laborum porro. Id reprehenderit rerum facilis consectetur iusto, porro eligendi natus provident, aut assumenda fugit eius vero explicabo enim ex in sed cum tempore quam. Itaque, repellendus aliquam, sapiente quia deleniti officia saepe dolor id at, quae labore similique rem cum eveniet distinctio incidunt modi eligendi veniam! Hic nisi sequi nostrum repudiandae quibusdam sint ipsum blanditiis iure! Sit iusto perspiciatis fugit, repudiandae consequuntur odio nesciunt cum, quisquam eius quod voluptatibus natus rem doloribus facere similique neque unde non quam! Dignissimos soluta repellendus vitae tenetur perferendis itaque perspiciatis porro ipsam at quia et ab cupiditate possimus, harum praesentium? Reprehenderit aut laborum exercitationem repellendus magni aliquid quos, rerum facilis. Ipsa aliquam aliquid laudantium itaque est nisi corrupti assumenda illum architecto, quisquam consectetur explicabo incidunt dolorum totam deserunt cupiditate nesciunt ducimus sunt reprehenderit eos perspiciatis quas perferendis corporis temporibus. Quo architecto quasi ullam non quod laboriosam animi, atque error. Inventore nihil eligendi placeat magnam reprehenderit assumenda reiciendis incidunt quaerat repellendus! Id pariatur accusamus labore rem nemo, nobis consectetur nostrum laborum! Dolorem cumque vitae cupiditate quibusdam odit rerum. Minus? </div>