Проблема в "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>
Решение с использованием 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>
Вот рабочий код, но он... как и собственно ваш код, нуждается в доработке)))
Вот он - 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 никак... Дальше все в ваших руках)))
Виртуальный выделенный сервер (VDS) становится отличным выбором
Добрый день! Столкнулся с проблемой и не могу составить корректный запрос в базу (не могу понять логику запроса) Есть такая схема: