jquery добавить в скрипт зависимость от ширины вюпорта

203

05 сентября 2018, 14:30

Есть скрипт - https://codepen.io/anon/pen/NBqOeE. Скрипт копирует мейн меню сайта когда до него доходит скролл, и делает копированное меню фиксед, если докрутить назад на место копированное меню пропадает. Делаю адаптив сайта, этот скрипт надо отключить на определенном вюпорте. Нужно: на всех экранах меньше 768 пикселей(768 включительно) что бы этот скрипт не работал, если мы опять изменим вюпорт на 768+ что бы опять работал. Спасибо

// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);

function stickIt() {
  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               
  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.
    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}

Answer 1

Можно так. Таймаут указан в 100ms, можете изменять под ваши нужды. В вашем случае и 1000ms будет в самый раз.

var resizeTimeout; 
 
window.onresize = function(){ 
	clearTimeout(resizeTimeout); 
	resizeTimeout = setTimeout(initAfterResize, 100); 
}; 
 
function initAfterResize(){ 
	 
	window.ScreenWidth = $(window).width(); 
	window.ScreenHeight = $(window).height(); 
	 
	if (window.innerWidth < 768) { 
		// не выполняем 
	} 
	else { 
		// выполняем 
	} 
	 
}