Фиксирование flex-контейнеров

[alex-romanov]

У меня есть <div> -контейнеры, вверху и внизу.

Я пытался зафиксировать верхний

$(window).scroll(function() {
                $(selector).css('top', $(document).scrollTop);
            });

этот код не работает.

/*фиксирование верхнего информационного блока;
        *
        * outerWidth() - Возвращает ширину элемента,
        * включая правые и левые внутренние отступы, размер рамки.
        * Так же могут быть включены и внешние отступы.
        *
        * $(window) - получаем объект  Window, который является центром
        * прикладных интерфейсов клиентского JavaScript.
        * Он представляет окно веб-браузера или фрейм,
        * а сослаться на него можно с помощью идентификатора `window`
        *
        * offset() - задает или возвращает значение координат для выбранных элементов
        * (относительно документа).
        * При получении значений координат этот метод возвращает объект
        * с двумя свойствами:
        * -   позиция элемента от верхнего края документа в пикселях (top).
        * -   позиция элемента от левого края документа в пикселях (left).
        * $height_element - высота элемента, который фиксируется
        * .scroll() - привязывает JavaScript обработчик событий
        * "scroll" (срабатывает при прокрутке элементов),
         * или запускает это событие на выбранный элемент.
         * scrollTop() - Получает значение отступа прокрутки сверху для первого элемента в наборе.
        * */
        function fixedSelectorInfoHeaderFlex(selector) {


            var $elemFixed = $(selector);
            var outerWidth = $(selector).outerWidth;

            $(selector).css('width', 'outerWidth');
            var $window = $(window);

            var $offsetElement = $elemFixed.offset();

            var $height_element = $offsetElement.top;

            $window.scroll(function () {

                var $scrollTop = $window.scrollTop;

                if($scrollTop > $height_element ){
                    $elemFixed.addClass("fixed");
                } else {
                    $elemFixed.removeClass("fixed");
                }
            });

            $('.' + 'fixed').css({
               'position': 'fixed',
                'z-index' : '9999',
                'top' : '0'
            });
        }

то же не работает

Можете привести рабочий код ?

[alex-romanov]

function fixedSelectorInfoHeaderFlex(selector) {
//infoHeaderFlex
            $(selector).css( {
                    'position': 'fixed',
                    'top': '0',
                    'left': '0',
                    'right': '0',
                'z-index' : '9999',
                'background': 'white',
                'margin-bottom':'40px'
               });
}

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

[alex-romanov]

единственное решение которое помогло для верхней части

/*фиксирование верхнего информационного блока;
        *
        * */
        function fixedSelectorInfoHeaderFlex(selector) {

            $(selector).css({
                'height': '7%', /*высота осноновного контейнера*/
                'border-bottom': '2px dotted #FFA953',
                'margin-bottom': '1%'
            });
            $('.' + selectorInfoHeaderFlex).css({
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'right': '0',
                'z-index': '9999',
                'background': 'white',
            });
        }

footer - не фиксируется из всех пересмотренных решений (начиная с css и заканчивая расчетами на jquery)
Наверное таблица, которая и является основной частью, при увеличении не дает нормально работать пересмотренными решениям.

[alex-romanov]

Это решение для footer, но оно не заработало

/*Фиксирование контейнера внизу страницы.
* height - устанавливает высоту области содержимого элемента
* browserHeight - высота текущего окна браузера;
* .outerHeight() получает текущее вычисленное значение
* внешней высоты (включая внутренние отступы - padding,
* границы - border и
* при необходимости внешние отступы - margin)
* для элемента;
* true - указывает на то, что нужно включить в расчеты,
* внешине отступы (margin);
* contentOuterHeight - высота основного блока с внешними отступами
* contentHeight - высота основного блока без учета внешних данных
* contentHeightMarginPaddingBorder - вычисляем полную высоту осовного блок
* (блок между header и footer);
* minHeightForContent - минимальная высота для основного блока.*/
function fixedContainerBottom(selector) {

    var browserHeight = $(window).height();
    var footerOuterHeight = $(selector).outerHeight(true);


    var contentOuterHeight = $('.' + options.selectorForCreateTable).outerHeight(true);
    var contentHeight = $('.' + options.selectorForCreateTable).height();

   var contentHeightMarginPaddingBorder = contentOuterHeight - contentHeight ;

    var minHeightForContent = browserHeight - footerOuterHeight - contentHeightMarginPaddingBorder;

   /*переопределяем стиль, для основного блока*/
    $('.' + options.selectorForCreateTable).css({

        'min-height': 'minHeightForContent'

    });

    handlerEventResizeWindowBrowser(selector);

}

/*обработчик события на изменение размера окна-браузера*/
function handlerEventResizeWindowBrowser(selector) {
    $(window).resize(function () {
        fixedContainerBottom(selector);
    });
}