function sidebarSticky() { let sidebar = document.getElementById("sidebar"), sidebarHeight = sidebar.offsetTop   sidebar.clientHeight; function process() { let windowHeight = document.documentElement.scrollTop   window.innerHeight; if (windowHeight {amp}gt; sidebarHeight) { sidebar.className = "sticky"; } else if (windowHeight {amp}lt; sidebarHeight) { sidebar.className = ""; } } //WithOut Scrolling... process(); //With Scrolling... window.addEventListener('scroll', function(){ process(); }) } sidebarSticky(); 
 *, *::before, *::after{ box-sizing: border-box; } body{ margin: 0; } nav{ height: 80px; width: 100%; position: fixed; top: 0; background-color: #000; z-index: 100; } #sidebar{ min-height: 100%; width: 160px; background-color: #ddd; position: absolute; left: 0; } .sticky{ position: fixed !important; bottom: 0 !important; } 
 {amp}lt;nav{amp}gt; {amp}lt;/nav{amp}gt; {amp}lt;div style="height: 80px;"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;!-- Sidebar --{amp}gt; {amp}lt;div id="sidebar"{amp}gt; {amp}lt;span{amp}gt; Start {amp}lt;/span{amp}gt; {amp}lt;span style="position: absolute; top: 50%;"{amp}gt; Middle {amp}lt;/span{amp}gt; {amp}lt;span style="position: absolute; bottom: 0;"{amp}gt; End {amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;!-- Sidebar --{amp}gt; {amp}lt;content style="display: block;margin: 20px 20px 20px 180px;"{amp}gt; Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, earum. {amp}lt;hr{amp}gt; {amp}lt;h1{amp}gt; distinctio facilis quisquam officia tenetur veniam quasi. Fugiat placeat, repellat iusto totam illum tenetur odio doloribus, fugit omnis incidunt quae repudiandae, quia quaerat perferendis! Minima laboriosam vero reprehenderit officia. Dolor rerum eligendi nemo ad quasi quisquam veniam aliquid commodi enim rem, consequuntur quos sequi veritatis nobis amet? Ab quis voluptas corrupti. Excepturi voluptatibus aut dignissimos perspiciatis culpa eaque repellat laborum illum, et vel saepe architecto temporibus inventore, corrupti laudantium quae? Sequi, dolorem? nostrum in odio quos mollitia dolores quas consectetur doloremque perferendis saepe quibusdam eaque totam vitae pariatur incidunt quaerat, vero exercitationem tenetur, sunt architecto ex voluptatem. Iure voluptas quae et. Ducimus, pariatur cumque itaque nihil neque blanditiis deleniti ullam consectetur quo, cum ipsam tempora exercitationem saepe accusamus. Officia ex voluptatum veri {amp}lt;/h1{amp}gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo sunt, fuga minima iure temporibus consequuntur blanditiis laboriosam architecto accusamus hic inventore, harum nisi dignissimos corrupti ad quae culpa asperiores ut. Necessitatibus et, magnam fugiat atque odio ad dolor quo minima in porro sint debitis tempora quasi, beatae accusamus distinctio repellat voluptas? Porro ratione nt accusamus quam odit laudantium a excepturi impedit, eaque voluptates dicta , sint illum recusandae quisquam laborum! Architecto fugit debitis similique suscipit amet saepe aut id ipsum beatae nam quas possimus sint autem atque quod aperiam earum, distinctio facilis quisquam officia tenetur veniam quasi. Fugiat placeat, repellat iusto totam illum tenetur odio doloribus, fugit omnis incidunt quae repudiandae, quia quaerat perferendis! Minima laboriosam vero reprehenderit officia. Dolor rerum eligendi nemo ad quasi quisquam veniam aliquid commodi enim rem, consequuntur quos sequi veritatis nobis amet? Ab quis voluptas corrupti. Excepturi voluptatibus aut dignissimos perspiciatis culpa eaque repellat illum, et vel saepe architecto temporibus inventore, corrupti laudantium quae? Sequi, dolorem? Cupiditate nostrum in odio quos mollitia dolores quas consectetur doloremque perferendis saepe quibusdam eaque totam vitae pariatur incidunt quaerat, vero exercitationem tenetur, sunt architecto ex voluptatem. Iure voluptas quae et. Ducimus, pariatur cumque itaque nihil neque blanditiis deleniti ullam consectetur quo, cum ipsam tempora exercitationem saepe accusamus. Officia quibusdam ex voluptatum veritatis possimus minus deleniti, aliquid facere quia? Amet odio recusandae soluta est esse expedita. Nemo at, voluptate impedit praesentium a doloremque architecto doloribus. Est eum enim veniam nobis rerum, corrupti accusantium et libero itaque inventore tenetur hic obcaecati voluptas sint id eligendi consequatur incidunt quaerat a asperiores laborum blanditiis tempora autem. Rem, non cupiditate. Eligendi non eaque laborum, sapiente praesentium iusto dicta atque consequatur ratione error fugiat. Voluptas eaque explicabo dolorum molestias, ad consectetur animi odio. Deserunt cum velit rerum corporis aliquid. Vitae, et exercitationem consequuntur debitis nobis a esse assumenda. Ex id reprehenderit sint vero debitis, temporibus sed aperiam saepe error mollitia vel iure, adipisci ipsam perspiciatis. Blanditiis libero minima mollitia enim voluptatibus tenetur voluptas. Labore voluptatum ratione unde esse ad voluptates deserunt reiciendis delectus! Quaerat eos, unde officia facere adipisci expedita alias? Ratione sapiente, facere, nemo, fuga repellendus obcaecati saepe consequuntur eos consectetur natus ipsa? Eaque vitae aspernatur ipsum? Cum, numquam fugiat ullam ipsum nemo quibusdam, error eius asperiores nostrum id laudantium veniam enim voluptatem, vero cumque esse tempore atque quae animi. Aliquam reprehenderit ullam repudiandae accusamus aut molestiae placeat odit? {amp}lt;/content{amp}gt; 


Все

является

обычно

хорошо, но когда я

изменить размер

окно / открытый вяз вяз тогда

брейки

боковая панель при прокрутке, как это

образ

и вторая проблема такая

образ

,

Обе проблемы создаются, когда я изменяю размер окна. Первая проблема заключается в том, что после изменения размера окна оно не совсем добавляет класс закрепления (похоже, что он слипается), а во-вторых, когда я нахожусь в верхней части, класс закрепления не удаляется. Я также попробую этот код:

 window.onresize = function (event) { process(); //failed again :( }; 

(для просмотра в реальном времени http://metahazzot.cf/ )

Попробуйте приведенный ниже пример кода

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;style{amp}gt; body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="mySidenav" class="sidenav"{amp}gt; {amp}lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"{amp}gt;{amp}amp;times;{amp}lt;/a{amp}gt; {amp}lt;a href="#"{amp}gt;About{amp}lt;/a{amp}gt; {amp}lt;a href="#"{amp}gt;Services{amp}lt;/a{amp}gt; {amp}lt;a href="#"{amp}gt;Clients{amp}lt;/a{amp}gt; {amp}lt;a href="#"{amp}gt;Contact{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div id="main"{amp}gt; {amp}lt;h2{amp}gt;Sidenav Push Example{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt;Click on the element below to open the side navigation menu, and push this content to the right.{amp}lt;/p{amp}gt; {amp}lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"{amp}gt;{amp}amp;#9776; open{amp}lt;/span{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Вы также можете попробовать приведенный ниже пример кода

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1"{amp}gt; {amp}lt;style{amp}gt; body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 160px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; padding-top: 20px; } .sidenav a { padding: 6px 8px 6px 16px; text-decoration: none; font-size: 25px; color: #818181; display: block; } .sidenav a:hover { color: #f1f1f1; } .main { margin-left: 160px; /* Same as the width of the sidenav */ font-size: 28px; /* Increased text to enable scrolling */ padding: 0px 10px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="sidenav"{amp}gt; {amp}lt;a href="#about"{amp}gt;About{amp}lt;/a{amp}gt; {amp}lt;a href="#services"{amp}gt;Services{amp}lt;/a{amp}gt; {amp}lt;a href="#clients"{amp}gt;Clients{amp}lt;/a{amp}gt; {amp}lt;a href="#contact"{amp}gt;Contact{amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="main"{amp}gt; {amp}lt;h2{amp}gt;Sidebar{amp}lt;/h2{amp}gt; {amp}lt;p{amp}gt;This sidebar is of full height (100%) and always shown.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Scroll down the page to see the result.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt;