Как убрать отступ при скроллинге?

275
25 апреля 2017, 07:02

Проблема в "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>

Answer 1

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

Answer 2

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

READ ALSO
Mysql many-to-many получить количество пересечений

Mysql many-to-many получить количество пересечений

Добрый день! Столкнулся с проблемой и не могу составить корректный запрос в базу (не могу понять логику запроса) Есть такая схема:

286