function sidebarSticky() {
let sidebar = document.getElementById("sidebar"),
sidebarHeight = sidebar.offsetTop + sidebar.clientHeight;
function process() {
let windowHeight = document.documentElement.scrollTop + window.innerHeight;
if (windowHeight > sidebarHeight) {
sidebar.className = "sticky";
} else if (windowHeight < 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;
}
<nav> </nav><div style="height: 80px;"></div><!-- Sidebar --><div id="sidebar"><span> Start </span><span style="position: absolute; top: 50%;"> Middle </span><span style="position: absolute; bottom: 0;"> End </span></div><!-- Sidebar --><content style="display: block;margin: 20px 20px 20px 180px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, earum.<hr><h1>
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 quibusdam ex voluptatum veri</h1>
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 ipsum quasi, beatae accusamus distinctio repellat voluptas? Porro ratione quod perferendis ullam nesciunt accusamus quam odit laudantium a excepturi impedit, eaque voluptates dicta consectetur, 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 laborum 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?</content>
Everything is normally good but when I resize the window/open inspact elm then it breaks the sidebar on scrolling like this


Both problems are created when I resize the window. 1st problem is after resizing the window it does not perfectly add the sticky class(look like glitching it) and the second problem is when I am in the top the sticky class does not remove. I also try this code:
window.onresize = function (event) {
process();
//failed again :(
};
(for live view http://metahazzot.cf/)