Фиксируемый по горизонтали заголовок страницы

Встречали ли вы проблему, когда адаптивная верстка (бутстрапа) не может быть применима ко всему сайту. Предположим, у вас на странице присутствует большая таблица, которую неудобно будет сворачивать в ключ-значение, как описано здесь.
И что же делать?
У вас широкое полотно, но шапка страницы сжимается по размеру окна и остается в начале.
Растянуть шапку — не дело, ведь чтобы теперь добраться до правого угла — нам нужно пользоваться скроллингом, а таблица пользователю вовсе не нужна.
Но выход есть
Нам понадобится немного магии jquery и css. Делаем фиксируемые по горизонтали элементы. Достаточно простой скрипт. Одно лишь ограничение — элементы подверженные скрипту должны быть относительным позиционированием — position: relative, у них также должен отсутствовать сдвиг с левой стороны left. Именно эти параметры нужны нам для формирования красивого сдвига.
Если у вас уже заданы позиционирование и положение слева — вы можете обрамить элемент данным новым слоем. Если можете эти параметры задать — допишите соответствующий класс для существующих элементов.
Назовем класс .scrollfix
И заставим все элементы с этим классом следовать положению окна, но только по горизонтали

$( window ).on( "scroll", function() {
 $('.scrollfix').css({left: $(window).scrollLeft()});
});

Вот и все. Немного магии и немного любви. Наверное есть смысл написать выражение без использования jquery, но вам обязательно придется задуматься о кроссбраузерности.
Да и не забудьте добавить css

.scrollfix{
 position: relative;
 left: 0;
}

Еще ограничение — элемент должен занимать весь экран по ширине, чтобы не загораживать элементы справа. Решить проблему нам поможет адаптивная верстка bootstrap

@media (min-width: 768px){
 .scrollfix-xs{
  position: initial;
 }
}
@media (min-width: 992px){
 .scrollfix-sm{
  position: initial;
 }
}
@media (min-width: 992px){
 .scrollfix-sm{
  position: initial;
 }
}
@media (min-width: 1200px) {
 .scrollfix-md{
  position: initial;
 }
}

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

Спасибо за внимание