Sam Vorst Ответов: 2

Как остановить мою фиксированную боковую панель с прокруткой в нижнем колонтитуле

Всем привет,

У меня есть вопрос, у меня есть липкая боковая панель.. Я хочу, чтобы это прекратилось, если достигнет нижнего колонтитула. Кто-нибудь знает, как это сделать?? Я знаю, что вы можете сделать это с помощью javascript, но я не очень хорошо в этом разбираюсь.

Вот мой html и css:
HTML:
<pre lang="HTML"><pre>      <div class="sticky-sidebar">
        <h1><small>Day #15</small> Sticky Sidebar <small>Final Version</small></h1>

        <div class="sandbox">
          <h2>Sandbox <small>This is where you play</small></h2>
          <div class="content">

            <a href="student.html" class="button-theme"><small>Click here to</small>View the student version</a><br>
            <a href="index.html" class="button-theme"><small>Click here to</small>View the info page</a>

            <h3>Lots of filler text to make the page long.</h3>
            <p></p>
            <p></p>
            <p></p>

          </div>
        </div>

        <div class="sticky-sidebar1">
          <h4>Sticky sidebar!</h4>
          <p>Scroll down to see.</p>
        </div>
      </div>

CSS:
.sticky-sidebar {
  width: 80%;
  margin: 0 auto;
			margin-bottom: 600px;
}

.sticky-sidebar::after {
  display: table;
  content: "";
  clear: both;
}

.sticky-sidebar .sandbox {
  width: 60%;
  margin: 0 0 40px;
  float: left;
}

.sticky-sidebar1 {
  background: #fff;
  padding: 40px 40px 60px;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 20px 20px 0 rgba(0,0,0,.05);
  position: fixed;
  right: 5%;
  width: 36%;
  float: right;
}


Спасибо, Сэм

Что я уже пробовал:

Я попытался поискать в интернете решения, я могу найти некоторые, но я не знаю, как реализовать этот код в моем, потому что я не очень хорошо знаю javascript.

2 Ответов

Рейтинг:
0

Andre Oosthuizen

Это то, что вы ищете - Сделать липкий боковой панели с полосой прокрутки с рабочей скрипкой ЗДЕСЬ

Возможно, вам придется изменить нечетный код, но этого должно быть достаточно для вашего вопроса.

Sam Vorst

Спасибо, я нашел это. Но я не знаю, как использовать его с моими собственными классами и т. д.

Andre Oosthuizen

Глядя на пример со скрипкой, какую часть вы не понимаете?

Sam Vorst

Ну, я реализовал код, но #sticky-anchor не объяснен, поэтому он не будет работать.

Рейтинг:
0

Richard Deeming

Похоже, в вашем вопросе нет нижнего колонтитула. Предполагая, что он находится за пределами sticky-sidebar элемент, CSS "липкое" позиционирование должно просто работать.

.sticky-sidebar1 {
    ...
    position: sticky;
    top: 0;
    ...
}
position - CSS: Каскадные Таблицы Стилей | MDN[^]
Демонстрация[^]