Как сделать плавающий сайдбар как на сайте https://www.citilink.ru/
Попробывал два варианта, но оба работают не совсем корректно:
Первый вариант: Работает на моём сайте e-geek.ru, но он постоянно подлагивает, и при возврате наверх съезжает на -8px;
var origTop = $('#bx_sidebar').offset().top;
var origBottom = origTop + $('#bx_sidebar').height();
var scrollDir = 0;
var scrollLast = 0;
var weirdOffset = -8;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var scrollBottom = $(window).scrollTop() + $(window).height();
var curTop = $('#bx_sidebar').offset().top;
var curBottom = curTop + $('#bx_sidebar').height();
if (scrollTop > scrollLast) {
scrollDir = 1;
} else if (scrollTop < scrollLast) {
scrollDir = 0;
}
scrollLast = scrollTop;
if (scrollDir == 1) {
if (scrollBottom >= origBottom && scrollBottom >= curBottom) {
$('#bx_sidebar').animate({
top: scrollBottom - $('#bx_sidebar').outerHeight() + weirdOffset
}, 0);
}
}
if (scrollDir == 0) {
if (scrollTop <= origTop) {
$('#bx_sidebar').css('top', (origTop + weirdOffset) + 'px');
} else if (scrollTop <= curTop) {
$('#bx_sidebar').animate({
top: scrollTop + weirdOffset
}, 0);
}
}
});
Второй вариант:
$(window).scroll(function() {
var diff = $("#blockLength").outerHeight() / $("#page").outerHeight();
var blocktoSet = $(window).scrollTop() * diff;
$("#block").scrollTop(blocktoSet);
console.log()
});
body {
position: relative;
}
#page {
position: relative;
width: 550px;
}
#page p {
text-align: justify;
}
#block {
background: #027EBA;
display: block;
width: 200px;
height: 100%;
position: fixed;
right: 20px;
top: 0;
overflow: hidden;
}
.pageHeader,
.pageFooter {
display: block;
width: 100%;
margin: 0 auto;
background: red;
color: white;
font-weight: bold;
font-size: 16px;
}
.blockHeader,
.blockFooter {
display: block;
width: 100%;
margin: 0 auto;
background: green;
color: white;
font-weight: bold;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<p class="pageHeader">PAGE HEADER</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem tempus.
Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id neque. Pellentesque
vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat est blandit nibh, at
porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem tempus.
Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id neque. Pellentesque
vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat est blandit nibh, at
porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p class="pageFooter">PAGE FOOTER</p>
</div>
<div id="block">
<div id="blockLength">
<p class="blockHeader">BLOCK HEADER</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet.
Donec eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius
enim ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet.
Donec eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius
enim ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p class="blockFooter">BLOCK FOOTER</p>
</div>
</div>
Здесь есть проблема, при скроллинге снизу вверх, приходиться ждать полной прокрутки контента для того чтобы увидеть верх сайдбара. Но как сделать чтобы прокрутка работала на оба блока но независимо, я не знаю.
Используйте height: 100vh
и overflow: auto
чтобы можно было независимо прокручивать сайдбар. http://jsfiddle.net/bQYrf/56/
$(window).scroll(function() {
var diff = $("#blockLength").outerHeight() / $("#page").outerHeight();
var blocktoSet = $(window).scrollTop() * diff;
$("#block").scrollTop(blocktoSet);
console.log()
});
body {
position: relative;
}
#page {
position: relative;
width: 550px;
}
#page p {
text-align: justify;
}
#block {
background: #027EBA;
display: block;
width: 200px;
height: 100vh;
position: fixed;
right: 20px;
top: 0;
overflow: auto;
}
.pageHeader,
.pageFooter {
display: block;
width: 100%;
margin: 0 auto;
background: red;
color: white;
font-weight: bold;
font-size: 16px;
}
.blockHeader,
.blockFooter {
display: block;
width: 100%;
margin: 0 auto;
background: green;
color: white;
font-weight: bold;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
<p class="pageHeader">PAGE HEADER</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem tempus.
Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id neque. Pellentesque
vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat est blandit nibh, at
porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem tempus.
Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id neque. Pellentesque
vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat est blandit nibh, at
porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p class="pageFooter">PAGE FOOTER</p>
</div>
<div id="block">
<div id="blockLength">
<p class="blockHeader">BLOCK HEADER</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet. Donec
eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius enim
ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet.
Donec eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius
enim ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p>2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nulla dapibus, pharetra nunc a, laoreet enim. Donec placerat odio et quam condimentum, et viverra augue porta. Proin sodales ligula a mauris accumsan, quis sagittis magna laoreet.
Donec eget dolor nisi. Integer sit amet orci rutrum, dignissim libero vel, congue quam. Vestibulum in felis ullamcorper, interdum justo non, suscipit magna. Sed sed metus luctus, lobortis tortor id, lacinia neque. Morbi vel arcu sollicitudin, varius
enim ut, viverra eros. Fusce dictum mauris et eros vehicula, non iaculis est pulvinar. Proin commodo, libero ac volutpat mollis, velit sapien condimentum magna, id pharetra lorem nibh vel arcu.</p>
<p>Sed elit ante, eleifend ac risus vitae, adipiscing feugiat nunc. Sed ac diam nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris scelerisque rhoncus augue a accumsan. Donec magna tellus, egestas
ut odio gravida, dictum facilisis est. Duis diam ligula, venenatis eget quam vel, sodales varius lacus. Ut pharetra lacus sit amet neque ornare venenatis. Donec nibh libero, gravida vel faucibus ut, egestas eget metus. Nam tempor est vel est euismod
convallis. Aenean metus enim, mollis et molestie a, posuere et sapien.</p>
<p>Sed vehicula viverra faucibus. Morbi faucibus sem sit amet tempus sagittis. Aliquam semper posuere metus, id malesuada magna accumsan in. Suspendisse ut mattis ipsum, bibendum fermentum arcu. Donec facilisis blandit libero in venenatis. Donec mattis
est mi, vitae faucibus felis scelerisque in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce laoreet nisl ac tempor venenatis. Quisque lobortis nunc sed massa suscipit, vitae commodo justo molestie.</p>
<p>Aenean rutrum eros a mauris eleifend lobortis. Curabitur id est tortor. Quisque posuere tristique leo eu varius. Mauris at nulla massa. Mauris gravida ultrices ligula id tincidunt. Duis interdum ipsum lectus, et vestibulum nulla hendrerit eu. Donec
eu eros neque. Pellentesque congue ac metus eu placerat. Vivamus vestibulum dui mi, vitae ultrices enim vestibulum non. Fusce laoreet ante sit amet luctus tincidunt. Fusce iaculis tempor pellentesque.</p>
<p>Cras lobortis, odio sit amet rutrum rhoncus, libero augue blandit risus, nec tristique dolor arcu quis risus. Nullam sit amet nibh vitae lorem laoreet consectetur vel et urna. Nam quis turpis ante. Maecenas elementum, libero vitae condimentum mollis,
enim purus cursus turpis, vitae congue diam arcu quis quam. Pellentesque tempus risus vitae lectus tempor, id elementum magna sollicitudin. Praesent congue adipiscing felis. Vivamus vehicula tortor dictum eros venenatis, fermentum lacinia lorem
tempus. Vivamus metus mi, ultrices in lacus sed, tincidunt congue odio. Sed posuere iaculis mollis. Aenean sed pretium purus, bibendum vulputate urna. Sed feugiat, neque eu scelerisque accumsan, elit felis pharetra sapien, non varius nisi eros id
neque. Pellentesque vestibulum felis cursus, aliquam dolor quis, pretium enim. Curabitur nibh eros, placerat ac nisl eget, commodo vestibulum tellus. Nunc et odio id dui hendrerit tristique. Donec volutpat, metus sit amet dignissim molestie, erat
est blandit nibh, at porttitor elit nulla ut nisl. Cras ut dapibus magna.</p>
<p class="blockFooter">BLOCK FOOTER</p>
</div>
</div>
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Тестирую на устройстве с ios 9 и при клике срабатывает стиль hoverКак сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?
Можно ли, одним запросом, получить данные из 3-х таблиц,
У меня есть код, в котором экземпляр класса, реализующего интерфейс Iterable, помещен в цикл foreach, и это не только не вызывает у компилятора возражений,...