Как сделать фиксированную боковую панель, как на сайте Reddit?

Question

Я уже пробовал с фиксированной и фиксированной позицией. Допустим, у нас есть два столбца на нашем веб-сайте: основной столбец и боковая панель. И в нашем боковом столбце содержится содержимое, превышающее высоту порта представления (как в reddit * Веб-сайт 1002 *, так как он содержит нижний колонтитул и некоторые рекламные объявления.) При фиксированной позиции боковая панель не прокручивается при прокрутке страницы. При фиксированной позиции боковая панель изначально является липкой и прокручивается только после окончания основного столбца. В боковой панели reddit правая боковая панель прокручивается вместе с прокруткой страницы. Когда боковая панель достигает конца своего содержимого, она становится привязанной к порту просмотра. Как мне этого добиться?

Вот код для CSS

.sidenav {   position: sticky;   top: 20px;    right: 0;   left: 0;   float: left;   padding:10px;   z-index:999998; }

.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    color: #2196F3;
    display: block; }

.main {
    margin-left: 140px; 
    font-size: 28px; 
    padding: 0px 10px; }

код для HTML

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
    <a href="#about">About</a>
</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
    <p>
</div> 

Answer 1

Вы можете сохранить определенное значение положения прокрутки (количество пикселей) на странице, на котором вы хотите переключиться со статического положения полосы прокрутки, чтобы зафиксировать его в нижней части страницы. Я использовал начало боковой панели + высота боковой панели - высота окна + отступы, которые я хочу ниже боковой панели. Затем вы просто проверяете положение прокрутки окна, когда документ прокручивается, и если оно превышает значение, которое вы сохранили, вы добавляете класс, который переключает его положение на фиксированное. Этот фрагмент использует jQuery для выполнения поведения всего за несколько строк.

const sidebar = $('.sidebar');
const fixedScrollPosition = sidebar.offset().top + sidebar.outerHeight() - $(window).innerHeight() + 10;

$(document).on('scroll', function() {
  sidebar.toggleClass('fixed', $(window).scrollTop() > fixedScrollPosition);
});

body {
  font-size: 0;
  padding: 0;
}

p {
  height: 200px;
  background: red;
}

p:last-child {
  margin: 0;
}

.page-content {
  width: calc( 100% - 160px);
  margin-right: 10px;
  font-size: initial;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
}

.sidebar {
  width: 150px;
  font-size: initial;
  box-sizing: border-box;
  vertical-align: top;
  display: inline-block;
}

.sidebar.fixed {
  position: fixed;
  bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>
<div class="sidebar">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

Answer 2

Отредактировано:

HTML:

<div class="sidenav">
  <a href="#about">About</a>
  <a href="#services">Services</a>
  <a href="#clients">Clients</a>
  <a href="#contact">Contact</a>
  <div class="sticky-tag">
  <a href="#sticky">sticky</a>
  <a href="#sticky">sticky</a>
  </div>
</div>

<div class="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.<br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac nisi nec mi elementum pretium sit amet ac leo. Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh.
    <br>Vestibulum pellentesque, nisl sed bibendum mollis, neque quam auctor lorem, a mollis erat risus id purus. Etiam vel semper nibh. Praesent ac augue ultricies, auctor orci sed, mollis metus. Nunc in tempus lectus. Duis id sapien dignissim, lobortis velit ornare, fringilla ex.
    <p>
</div> 

CSS:

.sidenav {
  margin-top: 20px;
  float: left;
  padding: 10px;
  z-index: 999998;
  width: 12%;
  height: 100vh; 
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #2196F3;
  display: block; 
}

.sidenav .sticky-tag {
  position: sticky;
  top: 20px;
}

.main {
  width: 88%;
  margin-left: 12%;
  font-size: 28px; 
  padding: 0px 15px; 
}