Bootstrap боковой панели - сделать фиксированный в зависимости от прокрутки позиции

Question

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

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

.affix { 
    top: 0; 
} 

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

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

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

Answer 1

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

Добавить id 'content' в ваш контент 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/

Примечание я добавил clearfix к заголовку.