1

Проблема в "header". Из-за position fixed у "sidebar", при скроллинге остается отступ:

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>

1
  • Проще более нормальный CSS написать, мне кажется, чем бороться с этим при помощи JS.
    – labris
    23 апр 2017 в 22:02

2 ответа 2

0

Решение с использованием 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>

0

Вот рабочий код, но он... как и собственно ваш код, нуждается в доработке)))
Вот он - 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>

собственно, тут без JS никак... Дальше все в ваших руках)))

2
  • У вас высота .header элемента захардкожена и .sidebar элемент не закеширован, а вычисляется при каждом вызове. 23 апр 2017 в 22:31
  • @Alex Zhulin, для ознакомления подойдет)
    – Ruslan
    23 апр 2017 в 22:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.