Фиксированная позиция боковой панели, которая останавливается у нижнего колонтитула

0

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

У меня есть боковая панель, фиксированная позиция в верхней части моего документа, которая нарушает элемент из нормального потока html.

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

HTML

<div id="content">
  <div id="sidebar">
    <ul>
      <li>link</li>
      <li>link</li>
      <li>link</li>
    </ul>
  </div>
</div>
<div id="footer">
  <p>content of unspecified height</p>
  <p>content of unspecified height</p>
  <p>content of unspecified height</p>
  <p>content of unspecified height</p>
</div>

CSS

#content {
  width: 800px;
  margin: 0 auto;
  position: relative;
}

#sidebar {
  padding: 10px;
  position: fixed;
  top: 0;
}

#footer {
  padding: 10px;
}

JS

...?

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

Изменение: О да, и когда страница прокручивается назад, боковая панель должна вернуться к фиксированной вершине positioning- на всякий случай, если она не будет очевидна :)

Еще новичок в JS и JQuery, что является еще одной причиной того, что некоторые из существующих ответов не совсем для меня.

Спасибо за любой вклад! Дайте мне знать, если мне нужно уточнить или исправить что-либо.

Теги:

1 ответ

0

Вероятно, вам нужна функция $(window).on('scroll') которая сравнивает верхнюю часть нижнего колонтитула в нижней части окна. Псевдопользователей-код:

//Make the height of side nav shrink as we scroll past the footer
var intPos = TopOfFooter - BottomOfWindow
If (intPos < 0) {
   var newHeight = $(window).height() + intPos // intPos is negative so will take away
   $('#sidebar').height(newHeight);
} else {
   $('#sidebar').height('100%');
}

Или что-то в этом роде...

РЕДАКТИРОВАТЬ

FYI:

var TopOfFooter = $('#footer').offset().top;
var BottomOfWindow = $(window).scrollTop() + $(window).height();
  • 0
    Этот код выглядит так, как будто он может работать, но вместо уменьшения высоты боковой панели, возможно, имеет больше смысла переключать новый класс на элемент с обновленным позиционированием? Так как я не использую указанную высоту на своих элементах контейнера, то высота 100% не будет работать?
  • 0
    Конечно, просто измените соответственно. Уменьшение высоты это то, что я бы сделал. :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню