The problem is in the "header". Because of the position fixed in the "sidebar", the indentation is left when scrolling:

https://jsfiddle.net/z6g97tt9/

html, body { height: 100%; margin: 0; padding: 0; color: #fff; } .header { width: 100%; height: 50px; background: red; position: absolute; top: 0; left: 0; right: 0; padding: 10px; } .wrapper { height: 100%; position: relative; padding-top: 50px; } .sidebar { width: 140px; height: 100%; position: fixed; top: 50px; background: pink; padding: 10px; } .content { width: calc(100% - 140px); min-height: 100%; position: relative; margin-left: 140px; background: blue; padding: 10px; } 
 <div class="header">HEADER</div> <div class="wrapper"> <div class="sidebar">SIDEBAR</div> <div class="content"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </div> </div>

  • It is easier to write more normal CSS, it seems to me, than to deal with it with the help of JS. - labris

2 answers 2

Solution using JS:

 (function($) { $(function() { var header = $('.header') , sidebar = $('.sidebar'); $(window).scroll(function() { var top = header.height() - $(window).scrollTop(); sidebar.css('top', top < 0 ? 0 : top); }); }); })(jQuery); 
 html, body { height: 100%; margin: 0; padding: 0; color: #fff; } .header { width: 100%; height: 50px; background: red; position: absolute; top: 0; left: 0; right: 0; padding: 10px; } .wrapper { height: 100%; position: relative; padding-top: 50px; } .sidebar { width: 140px; height: 100%; position: fixed; top: 50px; background: pink; padding: 10px; } .content { width: calc(100% - 140px); min-height: 100%; position: relative; margin-left: 140px; background: blue; padding: 10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header">HEADER</div> <div class="wrapper"> <div class="sidebar">SIDEBAR</div> <div class="content"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </div> </div>

    Here is the working code, but it ... like your code itself, needs some work)))
    Here it is - https://jsfiddle.net/jvx5rov6/

     $(window).scroll(function () { if ($(this).scrollTop() < 70) { $('.sidebar').css("top", 70 - $(this).scrollTop() + "px"); } else { $('.sidebar').css("top", "0"); } }); 
     html, body { height: 100%; margin: 0; padding: 0; color: #fff; } .header { height: 50px; background: red; padding: 10px; } .wrapper { height: 1000px; position: relative; } .sidebar { top: 70px; height: 100%; width: 140px; position: fixed; background: pink; padding: 10px; } .content { width: calc(100% - 160px); min-height: 100%; margin-left: 160px; background: blue; padding: 10px; } 
     <div class="header">HEADER</div> <div class="wrapper"> <div class="sidebar">SIDEBAR</div> <div class="content"> Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum. </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    in fact, there is no way without JS ... Then everything is in your hands)))

    • You have the height of the .header element zahardkozhena and. .sidebar element is not cached, and is calculated for each call. - Alex Zhulin
    • @Alex Zhulin, suitable for familiarization) - Ruslan