Поведение "плавающей" боковой колонки при изменении размеров окна браузера

[Schwab]

Здравствуйте, помогите разобраться и решить следующую проблему.
Реализовываю фиксацию боковой колонки на сайте при помощи следующего кода:

var rightcolumnTop = rightcolumn.offset().top;
var columnPosition = contentWidth - rightcolumnWidth + contentLeftMargin;
var rightcolumnStop = headerHeight + popularPostHeight + contentHeight - rightcolumnHeight;
var columnPositionDown = contentWidth - rightcolumnWidth;
$(window).scroll(function(){
   if ( $(this).scrollTop() > rightcolumnTop ) 
      {
        rightcolumn.addClass("columnfixed");
        rightcolumn.css({"top":"0px", "left": columnPosition - 2 +"px", "width": rightcolumnWidth+"px", });
       }
   if($(this).scrollTop() >= rightcolumnStop && rightcolumn.hasClass("columnfixed"))
       {   
          rightcolumn.removeClass("columnfixed");
          rightcolumn.addClass("columnabsolute");
          rightcolumn.css({"top": contentHeight - rightcolumnHeight+"px", "left": columnPositionDown - 2 +"px", "width": rightcolumnWidth+"px", });  
        }
   if($(this).scrollTop() < rightcolumnStop && rightcolumn.hasClass("columnabsolute"))
        {
           rightcolumn.removeClass("columnabsolute");
           rightcolumn.addClass("columnfixed");
           rightcolumn.css({"top":"0px", "left": columnPosition - 2 +"px", "width": rightcolumnWidth+"px", });
         }
                 
      if($(this).scrollTop() <= rightcolumnTop && rightcolumn.hasClass("columnfixed"))
         {
             rightcolumn.removeClass("columnfixed");
          }
});

Наверно идея очень не верно реализована (хоть и получается закрепить колонку когда нужно), но при изменении размеров окна браузера, колонка остаётся на том месте, которое на данный момент было определено в стилях. И проблема решается только при обновлении страницы.
Подскажите как правильно реализовать фиксацию и открепление колонки, чтобы не возникало таких проблем.

[aklis]

есть event resize

[Alex_63]

Schwab,

var rightcolumnTop = rightcolumn.offset().top;
var columnPosition = contentWidth - rightcolumnWidth + contentLeftMargin;
var rightcolumnStop = headerHeight + popularPostHeight + contentHeight - rightcolumnHeight;
var columnPositionDown = contentWidth - rightcolumnWidth;
$(window).on("scroll resize",function(){
   var scrlTop = $(this).scrollTop();
   if ( scrlTop > rightcolumnTop ) 
      {
        rightcolumn.addClass("columnfixed");
        rightcolumn.css({"top":"0px", "left": columnPosition - 2 +"px", "width": rightcolumnWidth+"px", });
       }
   if(scrlTop >= rightcolumnStop && rightcolumn.hasClass("columnfixed"))
       {   
          rightcolumn.removeClass("columnfixed");
          rightcolumn.addClass("columnabsolute");
          rightcolumn.css({"top": contentHeight - rightcolumnHeight+"px", "left": columnPositionDown - 2 +"px", "width": rightcolumnWidth+"px", });  
        }
   if(scrlTop < rightcolumnStop && rightcolumn.hasClass("columnabsolute"))
        {
           rightcolumn.removeClass("columnabsolute");
           rightcolumn.addClass("columnfixed");
           rightcolumn.css({"top":"0px", "left": columnPosition - 2 +"px", "width": rightcolumnWidth+"px", });
         }
                 
   if(scrlTop <= rightcolumnTop && rightcolumn.hasClass("columnfixed"))
         {
             rightcolumn.removeClass("columnfixed");
          }
});

[Schwab]

Спасибо за подсказку! Получился такой код:

$(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, изменяется, но в стилях этого не происходит. В чем может быть причина, не могу пока сообразить?