Как срабатывает resize() в данном примере?

Question

[Евгений Журов]

Друзья, помогите разобраться, а то виски уже поседели...
Верстаю адаптивный макет. При ширине экрана <768 панель навигации скрывается и вызывается только по клику по гамбургеру. С этим проблем нет.
Далее. При ширине >768 и при прокрутке, при достижении определенной высоты панели навигации присваивается position: fixed, т.е. она остается приклеенной к верху страницы. Соответственно, подобное поведение мне требуется только при ширине от 768. Так вот - как сделать так, чтобы при достижении <768, без перезагрузки, этой проклятой панели навигации переставал присваиваться position: fixed?

Вот собственно, код, который не срабатывает:

function floatNavbar() {
		$(window).scroll(function() {
                        // Если скролл больше высоты хидера
			if ($(window).scrollTop() >= $(".header").outerHeight()) {
                                // Присвоить навбару вот это:
				$(".navbar").css("position", "fixed");
			} else {
                                // Иначе - вернуть исходное значение
				$(".navbar").css("position", "");
			}
		});
	}

	// При загрузке - в зависимости от ширины экрана - срабатывает или не срабатывает floatNavbar()
	if ($(window).width() >= 768) {
		floatNavbar();
	}

        // А вот при ресайзе - floatNavbar() срабатывает всегда, хотя, казалось бы, не должен...
        // и панель навигации - хоть в свернутом, хоть в развернутом виде
        // упрямо прилипает к верху страницы
	$(window).resize(function() {
		if ($(window).width() >= 768) {
			floatNavbar();
		}
	});

Что делать, и кто виноват?

Comments

[Dark Hole]

На фиддл скиньте, так я не могу понять, в чем проблема

[Сергей delphinpro]

var scrollTop = $(window).scrollTop();
var headerHeight = $(".header").outerHeight();
var windowWidth = $(window).width();

if (scrollTop >= headerHeight && windowWidth >= 768) {

} else {

}

[Евгений Журов]

Dark Hole: https://jsfiddle.net/m4pq2L6m/34/

Если сузить область с результатом, не перезагружая страницу, то floatNavbar() все равно будет срабатывать. Если же сузить (менее чем 768), а потом перезагрузить - то все в порядке, не срабатывает. И вопрос в том, что нужно прописать в функции resize(), чтобы при достижении ширины менее 768 floatNavbar() переставала срабатывать.

[Евгений Журов]

Сергей: черт возьми, кажется, работает! Большое спасибо!

[Евгений Журов]

Сергей: Вы не могли бы запостить ответ от своего имени не в комментариях, а именно в ответах? Я тогда смогу отметить ваш ответ решением.

[Сергей delphinpro]

Zhuroff: Если очень хочется чтобы у вопроса было решение, можете сами сделать ответ.

Answer 1

[Евгений Журов]

var scrollTop = $(window).scrollTop();
var headerHeight = $(".header").outerHeight();
var windowWidth = $(window).width();

if (scrollTop >= headerHeight && windowWidth >= 768) {

} else {

}

Спасибо Сергею.