Как реализовать плавающий сайдбар

281
21 мая 2017, 22:17

Как сделать плавающий сайдбар как на сайте 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>

Здесь есть проблема, при скроллинге снизу вверх, приходиться ждать полной прокрутки контента для того чтобы увидеть верх сайдбара. Но как сделать чтобы прокрутка работала на оба блока но независимо, я не знаю.

Answer 1

Используйте 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>

READ ALSO
Как убрать hover на мобильных устройствах?

Как убрать hover на мобильных устройствах?

Тестирую на устройстве с ios 9 и при клике срабатывает стиль hoverКак сделать, чтобы стиль наведения не срабатывал на мобильных устройствах?

1960
Можно ли в одном запросе получить данные с 3-х и более таблиц с разной структурой

Можно ли в одном запросе получить данные с 3-х и более таблиц с разной структурой

Можно ли, одним запросом, получить данные из 3-х таблиц,

278
Как сделать update JTable?

Как сделать update JTable?

Можете подсказать, как обновить данные в JTable? Заранее спасибо!

392
Почему объект, реализующий Iterable, ведет себя как множество?

Почему объект, реализующий Iterable, ведет себя как множество?

У меня есть код, в котором экземпляр класса, реализующего интерфейс Iterable, помещен в цикл foreach, и это не только не вызывает у компилятора возражений,...

284