Скробельные боковые панели на странице

217
06 августа 2018, 09:50

Хочу сверстать страницу со скробельным содержимым посередине и двумя фиксированными колонками по бокам. При этом боковые колонки так же могут скролиться, если контенту недостаточно высоты экрана.

Вот яркий пример того, что хочу: https://getbootstrap.com/docs/4.1/getting-started/introduction/ Эффект виден на широких мониторах с небольшой высотой. Так же прикрепил гифку для наглядности.

Уверен, это можно решить с помощью CSS (возможно, того же Bootstrap'а), но если понадобиться JS - не проблема.

Answer 1

текст просто для видимости - механизм не сложный

смотреть на всю страницу

$(document).ready(function($) { 
  $(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= 10) { 
      $(".item1,.item2").css({ 
        "padding-top": "0" 
      }); 
    } else { 
      $(".item1,.item2").css({ 
        "padding-top": "100px" 
      }); 
    } 
  }); 
});
* { 
  margin: 0; 
  padding: 0; 
} 
 
.header { 
  position: relative; 
  height: 100px; 
  background: red; 
  z-index: 100; 
} 
 
.item1, 
.item2 { 
  padding-top: 100px; 
  transition: .2s; 
} 
 
.item1, 
.item2 { 
  position: fixed; 
  top: 0; 
  width: 200px; 
  height: 100vh; 
  background: #fbfbfb; 
} 
 
.item1 { 
  left: 0; 
} 
 
.item2 { 
  right: 0; 
} 
 
.item { 
  width: calc(100% - 450px); 
  margin: auto; 
  padding: 10px 40px; 
  font-size: 26px; 
  white-space: pre-wrap; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="header"> 
  this is header 
</div> 
<div class="item1"> 
  левый блок 
</div> 
<div class="item2"> 
  правый блок 
</div> 
<div class="item"> 
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus, provident recusandae doloremque quisquam ut quis ex aliquid sit. Harum ipsa suscipit provident alias esse! Eaque facere molestiae est eveniet aliquid nostrum voluptatem aperiam labore, 
  porro exercitationem omnis. Error, distinctio quidem sapiente ipsa repellat voluptatum eligendi provident, incidunt, iste eveniet eaque porro sunt vel blanditiis debitis laudantium vero culpa nulla nisi dolore maxime. Quo, vel. Officiis quam tempora 
  eius possimus tempore facilis ipsam adipisci? Impedit, tempore doloremque minima neque eveniet minus! Officia eos omnis recusandae? Natus facilis fugiat assumenda veniam cum et quae ipsa laborum ea consectetur tenetur, dolorum eum praesentium ex molestiae 
  quia officia nostrum, officiis consequuntur facere! Soluta expedita aperiam reprehenderit error dolorum ipsum autem repellendus sint minus quae, sed, accusantium aliquid hic atque veritatis eveniet esse, voluptates ab necessitatibus vero optio magnam? 
  Suscipit sequi porro at earum voluptate dicta molestiae quo est voluptatibus, eligendi impedit quae fugit adipisci beatae commodi vero dignissimos tempore vel? Atque dolor aperiam porro similique eveniet, labore laboriosam iste blanditiis beatae in. 
  Neque repudiandae aspernatur, eum quis atque accusantium deleniti dolorum fuga placeat. Quia dolores nemo eos officiis in, dicta repellendus nihil minima excepturi voluptatum necessitatibus veritatis sunt quas sapiente porro accusantium obcaecati! Sit 
  perspiciatis necessitatibus quod dolore sapiente assumenda neque, nam non libero. Dolores facere harum necessitatibus fugiat debitis asperiores explicabo doloribus reprehenderit quaerat sunt commodi ad consequuntur, sequi at. Natus molestiae animi dignissimos, 
  eligendi maxime maiores accusantium sint eveniet. Nulla odio ratione laborum odit eos magnam, eligendi repellendus reiciendis dolores nam tempora id, commodi quaerat labore, culpa quas voluptates molestias esse doloribus? Rerum veniam reiciendis magnam 
  ducimus dolores id similique, optio, reprehenderit mollitia, nemo architecto pariatur odit eaque quis. Vel suscipit soluta ab non. Laudantium iste mollitia tempora facilis debitis repudiandae, odio tenetur natus ullam corrupti quae molestias, optio 
  unde aliquam doloribus id rerum sapiente nihil! Nostrum ea, libero illo exercitationem expedita voluptates enim culpa cumque deserunt adipisci sequi rerum temporibus ex eius recusandae illum, vero ipsam laborum porro. Id reprehenderit rerum facilis 
  consectetur iusto, porro eligendi natus provident, aut assumenda fugit eius vero explicabo enim ex in sed cum tempore quam. Itaque, repellendus aliquam, sapiente quia deleniti officia saepe dolor id at, quae labore similique rem cum eveniet distinctio 
  incidunt modi eligendi veniam! Hic nisi sequi nostrum repudiandae quibusdam sint ipsum blanditiis iure! Sit iusto perspiciatis fugit, repudiandae consequuntur odio nesciunt cum, quisquam eius quod voluptatibus natus rem doloribus facere similique neque 
  unde non quam! Dignissimos soluta repellendus vitae tenetur perferendis itaque perspiciatis porro ipsam at quia et ab cupiditate possimus, harum praesentium? Reprehenderit aut laborum exercitationem repellendus magni aliquid quos, rerum facilis. Ipsa 
  aliquam aliquid laudantium itaque est nisi corrupti assumenda illum architecto, quisquam consectetur explicabo incidunt dolorum totam deserunt cupiditate nesciunt ducimus sunt reprehenderit eos perspiciatis quas perferendis corporis temporibus. Quo 
  architecto quasi ullam non quod laboriosam animi, atque error. Inventore nihil eligendi placeat magnam reprehenderit assumenda reiciendis incidunt quaerat repellendus! Id pariatur accusamus labore rem nemo, nobis consectetur nostrum laborum! Dolorem 
  cumque vitae cupiditate quibusdam odit rerum. Minus? 
</div>

Answer 2

Осталось все это дело стилизовать и поработать с полосами прокрутки, и дело в шляпе. Если нужен адаптив media queries к Вашим услугам.

.fixed{ 
  position: fixed; 
  top: 0; 
  left: 0; 
  display: flex; 
  width: 100vw; 
  height: 100vh; 
} 
 
.left{ 
  width: 20%; 
  overflow-y: auto; 
} 
 
.center{ 
  width: 60%; 
  overflow-y: auto; 
} 
 
.right{ 
  width: 20%; 
  overflow-y: auto; 
}
<div class='fixed'> 
  <div class='left'> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium impedit sapiente laudantium earum quibusdam tempore, quae repellendus repellat omnis, sequi quis ad magnam ducimus delectus odio provident architecto totam corrupti! 
  </div> 
  <div class='center'> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio esse reiciendis iusto aspernatur perspiciatis! Ducimus a, ex rerum dolorum quisquam eos eum magni temporibus, voluptates, quaerat iure, explicabo praesentium provident. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid ipsum voluptatibus, laudantium earum quidem, accusamus tempore nulla facere doloremque perspiciatis voluptates at aliquam enim ducimus. Facilis accusamus quam, reiciendis expedita. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo esse impedit, possimus eius laborum quibusdam enim nemo, distinctio commodi magnam porro facilis quas molestiae illo sed, voluptatibus nisi reiciendis! Quam! 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur quas asperiores, nostrum sed eligendi debitis nulla ea tenetur dolore labore alias praesentium dolor repellendus illo natus voluptatem reprehenderit, perspiciatis consequuntur. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptas ullam error, mollitia dicta quis illo eius voluptatibus sunt eaque molestias, quas asperiores laborum, ipsa cupiditate incidunt adipisci impedit. Ducimus. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam iure esse non odit maiores molestias consectetur iusto eaque officia, natus illo impedit reprehenderit illum provident, id, mollitia ipsum consequuntur sit. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat nesciunt officiis maiores magnam provident delectus, quibusdam animi nemo molestias eos natus deleniti voluptas libero, possimus earum hic quas, eum et? 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit atque, optio, facere explicabo illum aperiam maxime vero dolorem autem laudantium aliquam, recusandae est dolore sint beatae eveniet sapiente. Itaque, earum! 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio molestias, iure quaerat! Beatae tempora velit temporibus necessitatibus placeat aperiam ipsam, libero maiores dolor quisquam, ab vitae, dicta esse possimus dignissimos. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa numquam, neque architecto accusantium perferendis a veniam, dolorem in reiciendis. Corporis ea perspiciatis rem rerum et blanditiis quae ducimus vitae adipisci. 
  </div> 
  <div class='right'> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt expedita, at nisi. Deleniti nesciunt, laboriosam assumenda numquam sequi accusamus soluta est ea consequatur voluptate! Saepe minima ullam, officia dignissimos minus. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam, expedita repellat soluta ullam earum, fuga sapiente laboriosam fugiat mollitia. Itaque, aut beatae sint quae facilis quia aliquid perspiciatis ad est! 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consectetur ipsum repellat quibusdam debitis vitae suscipit quod, voluptate. Natus impedit fugiat dolor magni nemo sequi tenetur rem quasi nesciunt velit. 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum quaerat dolores quod, itaque modi aut reiciendis necessitatibus quis. Voluptatem quisquam, earum praesentium sunt voluptas ea nisi aliquam cum sit impedit. 
  </div> 
</div>

READ ALSO
Как сделать фиксированное боковое меню? [закрыт]

Как сделать фиксированное боковое меню? [закрыт]

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

157
Обновить title ссылки javascript

Обновить title ссылки javascript

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

160
Как подключить bootstrap select?

Как подключить bootstrap select?

На форуме показан пример, что он изображён так

223