Прокрутка контента плавно при фиксированной позиции боковой навигации

Question

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

Вот мой код: http://jsfiddle.net/grjopa/7GfQ2/1/

В этом примере кода мне нужен # sidenav-bottom div для плавной прокрутки под фиксированной позицией #sidenav div.

Какой код мне нужно добавить, чтобы выполнить это?

Answer 1

Когда вы применяете position:fixed, он «поднимает» sidenav из потока документов, в результате чего содержимое ниже подпрыгивает, чтобы заполнить пробел.Чтобы предотвратить это, просто вставьте пустой элемент, который занимает место (и снова удалите его при переключении на position:relative).

См. Исправленную демонстрацию: http://jsfiddle.net/7GfQ2/4/.

---

Обратите внимание, моя демонстрация просто показывает основную концепцию, и я был ленив.Вы должны прочитать все свои переменные из DOM и кэшировать их, прежде чем изменять какие-либо свойства CSS или добавлять / удалять элементы.В настоящее время он вызывает ненужные перекомпоновки страниц (в потенциально критичном для производительности разделе), поскольку переключается между чтением из DOM и изменением DOM.

Answer 2

Это работает:

http://jsfiddle.net/7GfQ2/6/

когда фиксирован sidenav.

$('#sidenav-bottom').css('margin-top',$('#sidenav').height()+20);

когда относительный sidenav

$('#sidenav-bottom').css('margin-top','10px');

Answer 3

Использование jQuery

Существует очень быстрый способ сделать то, что вы хотите, используя jQuery ScrollToFixed . Все кредиты идут в @bigspotteddog в этой теме на SO .