1 условие работает всегда а другое только 1 раз после загрузки страницы. Почему?

Question

[Константин Теплоухов]

Здравствуйте .

Просто извинения .

Скажу сразу что обычно моим опыт рабаты с js заканчивается на подключение плагина . Поэтому возможно вопрос глуп и не обоснован .

У меня есть css класс fixed-header который (как не странно) фиксирует шапку . Шапку нужно фиксировать только если : Ширина экрана / ока браузера (или по чём там измеряют ) больше 1200px Тб только на ноутах + ПК

Вот код набросал но мне кажется что он ... вообщем с ним что-то не так . (как пример : вот если оставить только условие которое добавляет или убирает класс то оно работает всегда . Если сначала проскроллить а потом вернуть и так пару раз то условие постоянно работает А вот если изменить размер окна браузера после загрузки то условие проверяющее размер body не работает . Надеюсь мне удалось объяснить -_- )

$(function(){
    	var widthBody = $("body").width();
    	if (widthBody >= 1200) {
			$(window).scroll(function(){
				var winTop = $(window).scrollTop();
				if(winTop >= 30){
				  $("header").addClass("fixed-header");
				}else{
				  $("header").removeClass("fixed-header");
				}
			});
    	}
    });

Answer 1

[Максим]

вам надо ставить другое условие, например так
$(window).on('resize', function(){ вот так
и потом уже писать так :
$(window).on('resize', function(){
if($(window).width() < 640){
и что должно произойти !

но более лучше писать так $(window).on('load resize', function(){
так как это должно срабатывать не только при изменении window но и при загрузке!

вот дэмо : https://codepen.io/topicstarter/pen/aGxpjg