Почему при ресайзе окна браузера, не учитываются его размеры?

Question

[Сергей Бурдужа]

Объясню, что имею в виду.
У меня есть меню, которое складывается.
Оно нестандартное и состоит из двух частей.
На экранах до 1140px при скролле должна показываться одно меню, на меньшем - другая часть.

Я создал две функции
Первая

function forMobile(){
        $('body').css('padding-top', 100);
        categoriesWrap.css('display', 'none');

        $(window).on('scroll', function(){
            console.log('mobile');
            if($(window).scrollTop() > headerMainHeight  + 10) {
                categoriesWrap.hide();
            }else if($(window).scrollTop() < headerMainHeight  + 10){
                headerMain.removeClass('fixed');
                categoriesWrap.hide();
            }

            if($(window).scrollTop() > headerMainHeight  + 100) {
                headerMain.addClass('fixed');
            }    
        });
    }

И вторая

function forDesktop(){
        
        categoriesWrap.css('display', 'block');

        $(window).on('scroll', function(){
            console.log('desktop');

            if($(window).scrollTop() < headerMainHeight  + 10){
                categoriesWrap.removeClass('fixed');
                categoriesWrap.css('display', 'block');
                categoriesWrap.css('opacity', 1);
            } 

            if($(window).scrollTop() > headerMainHeight  + 10) {
                categoriesWrap.css('opacity', 0);
                categoriesWrap.css('display', 'block');
            }

            if($(window).scrollTop() > headerMainHeight  + 100) {
                categoriesWrap.addClass('fixed');
                categoriesWrap.css('opacity', 1);
            }
        });
    }

И сам код

if($(window).width() < windowSize) {
        forMobile();
    } 

    if($(window).width() > windowSize){
        forDesktop();
    } 

    $(window).resize(function(){

        if($(window).width() < windowSize) {
            forMobile();
        }else{
            forDesktop();
        }
    });

Так вот, при открытии сайта в браузер скроллится меню, в соответствии с разрешением экрана.
А при ресайзе, когда перехожу за точку 1140 в ту или иную сторону, то на десктопе скроллится меню для телефона.
Я в каждую из функций прописал console.log('menu') и соответственно desktop

Вот ссылка на сайт site

При открытии браузера с разрешением до 1140 или за - в консоли выводиться только одно название из console.log()
Как только перехожу за рубикон, то выводится обе.
Как это можно объяснить.
Я уверен, что специалистам это очевидно.
Поделиться решением.
Заранее благодарен.

Comments

[Ankhena]

Вот вы открыли сайт на какой-то ширине. Пусть десктопной. Сработала первая часть, которая без ресайза. В консоли пишется desktop. Логично.
Изменили ширину, теперь сработал ресайз и его проверка. При этом первая часть как работала, так и работает.

Значит, в функции, которая показывает десктопное меню должно быть написано, что мобильное надо скрыть и наоборот.

[Сергей Бурдужа]

Ankhena, Спасибо. Теперь понятно.

[Сергей Бурдужа]

Ankhena, Можете переответить, чтобы сделать ваш ответ выбранным?

Answer 1

[ProjectSoft]

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

Нужно приблизительно так.
(Код ещё можно оптимизировать)

(function($){
	var windowSize = 1140,
		isDesktop = !($(window).width() < windowSize),
		$categoriesWrap = $('.categories-wrapper'),
		$headerMain = $('header'), // Скорее всего что-то типа так
		headerMainHeight = $headerMain.height(),
		scrollTop = $(window).scrollTop(),
		forDesktop = function(){
		
		!$categoriesWrap.is(":visible") && $categoriesWrap.css({'display': 'block'});
			
			scrollTop = $(window).scrollTop();
			
			if(scrollTop < headerMainHeight  + 10){
				$categoriesWrap.removeClass('fixed');
				$categoriesWrap.css('display', 'block');
				$categoriesWrap.css('opacity', 1);
			} 
			
			if(scrollTop > headerMainHeight  + 10) {
				$categoriesWrap.css('opacity', 0);
				$categoriesWrap.css('display', 'block');
			}
			
			if(scrollTop > headerMainHeight  + 100) {
				$categoriesWrap.addClass('fixed');
				$categoriesWrap.css('opacity', 1);
			}
		},
		forMobile = function(){
			
			$('body').css('padding-top', 100);
			
			$categoriesWrap.is(":visible") && $categoriesWrap.css({'display': 'none'});
			
			scrollTop = $(window).scrollTop();
			
			if(scrollTop > headerMainHeight  + 10) {
				$categoriesWrap.hide();
			}else if(scrollTop < headerMainHeight  + 10){
				headerMain.removeClass('fixed');
				$categoriesWrap.hide();
			}
			
			if(scrollTop > headerMainHeight  + 100) {
				headerMain.addClass('fixed');
			}
		};
	// Подписываемся на события
	$(window).on('resize scroll', function(e){
		isDesktop = !($(window).width() < windowSize);
		headerMainHeight = $headerMain.height();
		isDesktop ? forDesktop() : forMobile();
	});
	
	// Запустим
	isDesktop ? forDesktop() : forMobile();
	
}(jQuery));

Comments

[Сергей Бурдужа]

Спасибо, что ответили, у меня уже дым из ушей валит. Я кручусь но понимаю, что что-то не так делаю.
Оказывается я два действия на один обработчик повесил. Вот это открытие для меня.
Теперь пытаюсь понять код.
Вот это строка

!categoriesWrap.is(":visible") && categoriesWrap.css({'display': 'block'});

что она делает?
Тут ни if нету, ни ретурн.

[Сергей Бурдужа]

И зачем вы несколько нар переменную scrollTop перезаписываете, ведь у нее одно и тоже самое значение?
Или как вы писали выше, код можно оптимизировать?

[Сергей Бурдужа]

Да scrollTop нужен, чтобы для каждого экрана определить скроллинг.
Вот только зачем нужна строка с categoriesWrap, что выше?

Спасибо вам добрый человек. Добавляю ваш скрипт себе в копилку.
Теперь все работает.

[ProjectSoft]

Сергей Бурдужа,
Ответ на первый вопрос
Это логические операторы
На второй вопрос.
Мы сразу подписались и на ресайз, и на скролл одной функцией. Т. к. скролл происходит на много чаще, чем ресайз. Соответственно scrollTop будет меняться. Он не будет постоянен.

Ресайзом браузера пользователи не играются. А если играются, то это уже менеджеры проекта и разработчики и не важно в этой компании они работают или другой))))

[Сергей Бурдужа]

ProjectSoft, Вот про ресайз. Я думал, писать такие скрипты нужно для того, что человек может перевернуть телефон, и браузер перерисует сайт. Или я не правильно понял?

[Сергей Бурдужа]

ProjectSoft, И вот тут пожалуйста объясните и я отстану
Ведь в результат этого выражения

!categoriesWrap.is(":visible") && categoriesWrap.css({'display': 'block'});

Вы никуда не сохраняете?
Какую смысловую нагрузку она несет?

[ProjectSoft]

Сергей Бурдужа, да. Всё правильно. Я ни в коем случае не отрицаю ресайз. Просто событие ресайза всплывает на много меньше, чем скролл, а действия нужно выполнить те же самые в обоих событиях.

[Сергей Бурдужа]

ProjectSoft, И на второй вопрос пожалуйста ответьте, а то я не засну.

[ProjectSoft]

Сергей Бурдужа, мы просто проверяем, виден элемент или нет. Тем самым мы не дёргаем лишний раз аттрибут style у елемента.

[Сергей Бурдужа]

ProjectSoft, Спасибо. Хорошо, что есть такой форум))