Показать сообщение отдельно
  #4 (permalink)  
Старый 03.05.2016, 21:17
Новичок на форуме
Отправить личное сообщение для Schwab Посмотреть профиль Найти все сообщения от Schwab
 
Регистрация: 30.04.2016
Сообщений: 2

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