Боковая панель Bootstrap - исправляется в зависимости от положения прокрутки

Question

Пожалуйста, смотрите мою скрипку ниже:

https://jsfiddle.net/okiewardoyo/s23v891m/11/

.affix {
    top: 0;
}

Чтобы сделать экран шире, прокрутите экран.

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

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

Answer 1

Вам нужно будет добавить смещение к классу контента и снова удалить его, используя jQuery.

Добавьте идентификатор "контент" в ваш контент div. Затем добавьте следующий скрипт jQuery:

$('.sidebar').on('affix.bs.affix', function() {
    $('#content').addClass('col-sm-offset-3');
}).on('affix-top.bs.affix', function(){
    $('#content').removeClass('col-sm-offset-3');
});

Вы можете проверить это здесь: https://jsfiddle.net/TimOgilvy/s23v891m/16/

Заметьте, я добавил в заголовок отчет об ошибке.