Как выполнить скрипт при определенном размере экрана?

Question

[Mary_R]

Доброго времени суток!
Как и что надо прописать, чтобы скрипт работал только при размере большем, чем 760px?
В ниже приведенном варианте проблема в том, что если изначально сайт был открыт в меньшем окне, то при увеличении - скрипт не подхватывается... Действует только при обновлении страницы.

function sticky() {
			if ($(window).width() > 760) {
		var sticky_point = $("#header-top").innerHeight() + $("#header").innerHeight() + 20;
		$("#header").clone().attr({
			id: "header-sticky",
			class: ""
		}).insertAfter("header");
		$(window).scroll(function(){	
			if ($(window).scrollTop() > sticky_point) {  
				$("#header-sticky").slideDown(300).addClass("header-sticky");
				$("#header .menu ul, #header .menu .megamenu-container").css({"visibility": "hidden"});
			} else {
				$("#header-sticky").slideUp(100).removeClass("header-sticky");
				$("#header .menu ul, #header .menu .megamenu-container").css({"visibility": "visible"});
			}
		});
		}	
	}

Comments

[Кирилл]

rsdn.ru/forum/web/2467698.hot

[Елена]

Кирилл, спасибо, тоже буду иметь ввиду. :-)

Answer 1

[Wheelie]

$( window ).resize(function() {
  console.log($( window ).width())
});

Answer 2

[Никита Баев]

Добавьте проверку на resize:
$(window).resize(sticky);
Хотя не знаю юзеров, которые меняют разрешение экрана во время работы с сайтом.

Comments

[Сергей delphinpro]

ну я иногда перетаскиваю окно браузера с одного монитора на другой (разрешения разные).
Теперь знаете одного...

Answer 3

[Alex]

Если я правильно понял, там какие то манипуляции с CSS идут.
Почему бы не использовать

@media screen and (min-width: 760px) {
.header-top{
 height:100px
}
}
@media screen and (max-width: 760px) {
.header-top{
 height:1000px
}

Answer 4

[Елена]

Если кому интересно, решила все таким образом (это весь скрипт на работающее меню):

$(window).bind('resize', function(){ 
    if ($(window).width() < 450) {
        $('.main-nav').css('display','none');
        $('body').append('<div class="overlay-3"></div>');
        $('.main-nav').addClass('fadeout'); 
        $('.overlay-3').addClass('fadeout');
        
    $('.mobile-nav-btn').on('click', function() {
        if ($('.main-nav').css("display") == "none") {
            $('.overlay-3').fadeIn(200);
            $('.main-nav').fadeIn(200);
        }    
    });
    
    $(('a.nav-link')).on('click touch', function() { 
        $('.overlay-3, .fadeout').fadeOut(); 
    }); 
    
    $('body').on('click', '.overlay-3', function(event) {
    event.preventDefault();
    $('.overlay-3, .main-nav').fadeOut(200);
    });  
} 
else { 
    if ($(window).width() > 450) { 
        $('.main-nav').css('display','block'); 
        $('.main-nav').removeClass('fadeout'); 
        $('.overlay-3').removeClass('fadeout');
        $('.overlay-3').remove();
        }
    }
}).trigger('resize');

Только тут объединила все, что связано с мобильным меню в условие только для разрешений < 450px.

В < 450 $('.main-nav').css('display','none') в начале добавлен для того, чтобы меню не оставалось открытым, если пользователь вдруг повернул экран и в уже не мобильном меню перешел по ссылке (при повороте у меня открывается декстопная версия сайта).

В > 450 $('.main-nav').css('display','block') аналогично добавлен, чтобы меню не исчезало, если до этого было закрыто через оверлей.

В общем, не знаю, насколько все грамотно или правильно сделано, но главное, работает. :-)

P.S. за подсказку с добавлением класса fadeout и .trigger('resize') спасибо Антону. :-)