[DQGMHO1]

Сейчас реализовано 2 варианта фиксации сайдбара и оба кривые.

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

Предлагаю улучшить второй вариант сделав его аналогично поведению уже почти ставшим стандартом position: sticky; К сожалению именно почти и придется это реализовать через js т.к. многие браузеры пока не понимают.

Скрипт простой. В зависимости от позиции скролла страницы устанавливается классы на body, далее через css задаем свойства нужному элементу.

Приведу конкретный код для #side_bar.
CSS:

/*Скроем три иконки, которые появляются при скроле ниже чем меню (замена меню)*/
#stl_side{
    display: none !important;
}

/*Фиксируем сайдбар, если у body есть класс fix-sidebar*/
.fix-sidebar #side_bar{
    position: fixed;
    top: 0;
}

JavaScript:

addPageClassesRelativeScroll([
    // при скролле равном от 40 до бесконечности задать класс fix-sidebar для body
    {
        start: 40,
        class: 'fix-sidebar'
    }/*, //можно задавать несколько интервалов, но в данном примере нам это не надо
    {
        start: 100,
        end: 600,
        class: 'do-crazy-dance'
    }*/
]);

//Основная функция которая устанавливает классы по событию скролла
function addPageClassesRelativeScroll(intervals){
    var body = document.getElementsByTagName('body')[0];

    for (var k in intervals) {
        intervals[k].active = false;
    }

    addEvent(window, 'scroll', function() {
        var scroll = window.pageYOffset || document.documentElement.scrollTop, interval;
        for (var k in intervals) {
            interval = intervals[k];
            if (interval.active) {
                if (scroll < interval.start || (scroll >= interval.end && typeof interval.end !== 'undefined')) {
                    removeClass(body, interval.class);
                    interval.active = false;
                }
            } else {
                if (scroll >= interval.start && (scroll < interval.end || typeof interval.end === 'undefined')) {
                    addClass(body, interval.class);
                    interval.active = true;
                }
            }
        }
    });
}

Все работает как часы. Проверено.