Спасибо за подсказку! Получился такой код:
$(document).ready(function() {
$(window).on('scroll resize', function(){
var scrollTop = $(this).scrollTop(); //положение скролла от верха страницы
var rightcolumn = $("#right_column"); //обращение к правой колонке
var contentLeftMargin = $("#content").offset().left; //отступ основного блока с контентом от левого края окна браузера
var contentHeight = $("#content").outerHeight(true); //высота основного блока с контентом с учетом внутрених отступов и рамки
var contentWidth = $("#content").outerWidth(true); //ширина основного блока с контентом с учетом внутрених отступов и рамки
var rightcolumnHeight = rightcolumn.outerHeight(true); //высота правой боковой колонки
var rightcolumnWidth = contentWidth * 25 / 100; //ширина правой колонки
var headerHeight = $("header").outerHeight(true); //высота блока блока header с меню
var popularPostHeight = $("#popular_post").outerHeight(true); //высота блока с информером популярных постов
var rightcolumnTopBegin = headerHeight + popularPostHeight + 15; // начальное положение правой колонки от верха страницы с учетом разделительной полосы и внутреннего отступа основного контента
var columnFixedLeftPosition = contentLeftMargin + contentWidth - rightcolumnWidth; // положение правой колонки от левого края окна браузера при fixed
var columnAbsoluteLeftPosition = contentWidth - rightcolumnWidth; // положение правой колонки от левого края начала контента при absolute
var rightcolumnStop = headerHeight + popularPostHeight + contentHeight - rightcolumnHeight; // позиция скролла, при которой нижний край правой колонки сравняется с нижним краем основного контента
if ( scrollTop > rightcolumnTopBegin && !rightcolumn.hasClass("columnfixed"))
{
rightcolumn.addClass("columnfixed");
rightcolumn.css({"top":"0px", "left": columnFixedLeftPosition +"px", "width": rightcolumnWidth - 2 +"px", });
}
if(scrollTop >= rightcolumnStop && rightcolumn.hasClass("columnfixed"))
{
rightcolumn.removeClass("columnfixed");
rightcolumn.addClass("columnabsolute");
rightcolumn.css({"top": contentHeight - rightcolumnHeight - 10 +"px", "left": columnAbsoluteLeftPosition +"px", "width": "25%" - 2, });
}
if(scrollTop < rightcolumnStop && rightcolumn.hasClass("columnabsolute"))
{
rightcolumn.removeClass("columnabsolute");
rightcolumn.addClass("columnfixed");
rightcolumn.css({"top":"0px", "left": columnFixedLeftPosition +"px", "width": rightcolumnWidth - 2 +"px", });
}
if(scrollTop <= rightcolumnTopBegin && rightcolumn.hasClass("columnfixed"))
{
rightcolumn.removeClass("columnfixed");
}
console.log(" columnFixedLeftPosition " + columnFixedLeftPosition);
console.log(" columnAbsoluteLeftPosition " + columnAbsoluteLeftPosition);
});
});
Но одна проблема! При ресайзе окна браузера, отрабатывает перестраивание колонки когда она имеет абсолютное позиционирование, а в фиксированном положении колонка остается на месте наезжая на содержимое. В консоле видно, что значение переменной которую я указываю для координаты left, изменяется, но в стилях этого не происходит. В чем может быть причина, не могу пока сообразить?