jQuery при изменении размера окна

переместите javascript в функцию, а затем свяжите эту функцию с размером окна.

$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});
function updateContainer() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
}

jQuery имеет обработчик событий изменения размера, который вы можете прикрепить к окну,.изменить размер (). Так что, если вы ставите $(window).resize(function(){/* YOUR CODE HERE */}) тогда ваш код будет выполняться каждый раз при изменении размера окна.

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

// This function positions the footer based on window size
function positionFooter(){
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    else {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } 
}

$(document).ready(function () {
    positionFooter();//run when page first loads
});

$(window).resize(function () {
    positionFooter();//run on every window resize
});

посмотреть: событие изменения размера окна Кросс-браузера - JavaScript / jQuery

попробуйте это решение. Срабатывает только после загрузки страницы, а затем во время изменения размера окна в предопределенном resizeDelay.

$(document).ready(function()
{   
   var resizeDelay = 200;
   var doResize = true;
   var resizer = function () {
      if (doResize) {

        //your code that needs to be executed goes here

        doResize = false;
      }
    };
    var resizerInterval = setInterval(resizer, resizeDelay);
    resizer();

    $(window).resize(function() {
      doResize = true;
    });
});

дайте вашей анонимной функции имя, затем:

$(window).on("resize", doResize);

http://api.jquery.com/category/events/

можно использовать

        function getWindowSize()
            {
                var fontSize = parseInt($("body").css("fontSize"), 10);
                var h = ($(window).height() / fontSize).toFixed(4);
                var w = ($(window).width() / fontSize).toFixed(4);              
                var size = {
                      "height": h
                     ,"width": w
                };
                return size;
            }
        function startResizeObserver()
            {
                //---------------------
                var colFunc = {
                     "f10" : function(){ alert(10); }
                    ,"f50" : function(){ alert(50); }
                    ,"f100" : function(){ alert(100); }
                    ,"f500" : function(){ alert(500); }
                    ,"f1000" : function(){ alert(1000);}
                };
                //---------------------
                $(window).resize(function() {
                    var sz = getWindowSize();
                    if(sz.width > 10){colFunc['f10']();}
                    if(sz.width > 50){colFunc['f50']();}
                    if(sz.width > 100){colFunc['f100']();}
                    if(sz.width > 500){colFunc['f500']();}
                    if(sz.width > 1000){colFunc['f1000']();}
                });
            }
        $(document).ready(function() 
            {
                startResizeObserver();
            });

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

это вызовет ваш обработчик изменения размера, чтобы вызвать на изменение размера окна и на документ готов. Конечно, вы можете прикрепить обработчик изменения размера вне обработчика готовности документа, если хотите .trigger('resize') для запуска на странице загрузки вместо этого.

обновление: вот еще один вариант, если вы не хотите использовать любые другие сторонние библиотеки.

этот метод добавляет определенный класс к целевому элементу, так что у вас есть преимущество управления стиль только через CSS (и избегая встроенного стиля).

Это также гарантирует, что класс добавляется или удаляется только при срабатывании фактической пороговой точки, а не при каждом изменении размера. Он будет стрелять в один пороговая точка только: когда высота изменяется от 819 или наоборот и не несколько раз в пределах каждого региона. Это не касается каких-либо изменений в ширина.

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

в качестве примера, вы некоторые из ваших правил CSS могут иметь следующее:

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}

используйте этот:

window.onresize = function(event) {
    ...
}

вы можете связать resize используя .resize() и запустите свой код, когда браузер будет изменен. Вам также нужно добавить else условия if оператор, чтобы ваши значения css переключали старые и новые, а не просто устанавливали новые.