Jak zrobić, aby kod w js aktywował się, jedynie przy osiągnięciu danej szerokości przez stronę?

0

Tak jak w tytule napisałem, mam kod JS i chce, żeby aktywował się dopiero od jakieś szerokości całego okna np. 600px. Wiem, że jest to pewnie błahostka, ale już trochę nad tym główkuje, więc będę bardzo wdzięczny za uzyskanie odpowiedzi. Poniżej wklejam tego JSa.
Z góry dziękuje ;)

<script>
	$(document).ready(function() {
	var NavY = $('header,ol,li,a').offset().top;
	 
	var stickyNav = function(){
	var ScrollY = $(window).scrollTop();
		  
	if (ScrollY > NavY) { 
		$('header,ol,li,a').addClass('sticky');
	} else {
		$('header,ol,li,a').removeClass('sticky'); 
	}
	};
	 
	stickyNav();
	 
	$(window).scroll(function() {
		stickyNav();
	});
	});
	</script> 
0

Np coś w stylu:

let wasWide

const handleResize = () => {
  const isWide = window.innerWidth > 600
  
  if (isWide === wasWide) {
    return
  }
  
  if (isWide) {
    /* your code */
  } else {
    /* your code */
  }
  
  wasWide = isWide
}

// Runs once for initial size:
handleResize()

window
  .addEventListener('resize', handleResize)

CodePen: https://codepen.io/caderek/pen/KRXxRv?editors=1010

lub (lepiej):

const handleBreakpointChange = ({ matches }) => {
  if (matches) {
    /* your code */
  } else {
    /* your code */
  }
}

const breakpoint = window
  .matchMedia('(max-width: 600px)')

// Runs once for initial size:
handleBreakpointChange(breakpoint)

breakpoint.addListener(handleBreakpointChange)

CodePen: https://codepen.io/caderek/pen/pVWQjM?editors=1010

1 użytkowników online, w tym zalogowanych: 0, gości: 1