Position:Sticky Sidebar in Internet Explorer

Question

I am having issues with a sticky left sidebar in Internet Explorer 11. My current solution is working in Chrome and Firefox. I've attempted to make use of a CSS Polyfill, fixed-sticky , but still had problems with formatting- the content to the right of the sidebar is jumping to the left and overlapping with the sidebar when the position becomes fixed. Thanks for your ideas. This is what the code looks like:

 .contentWithSidebar-wrapper { display: table; height: 100vh; } .content-wrapper { padding-left: 10px; display: table-cell; width: 100%; vertical-align: top; } .sidebar-wrapper { position: relative; display: table-cell; vertical-align: top; } .sidebar-wrapper .sidebar { position: sticky; height: 100vh; } 

 <div> <div class="contentWithSidebar-wrapper"> <div class="sidebar-wrapper"> <div class="sidebar"> Sidebar content </div> </div> <div class="content-wrapper"> <div class="container-fluid"> Page content </div> </div> </div> </div> 

Answer 1

如果其他人有类似的问题， 这里的JavaScript解决方案是帮助我解决问题的原因。