problem z responsive

0

Witam napisałem funkcję na podstawie jquery która to powinna mi dodawać klasę ,,sticky" po scrolowaniu strony w dół i w zależności od rozdzielczości ekranu trzeba mniej lub więcej scrolować i wszytko pięknie ślicznie jak wstawię 1 rozdzielczość jednak po wstawieniu kilku warunków aplikacja juz nie działa tak jak bym chciał

$(window).scroll(function() {
	if (screen.width >= 1110) {
	if ($(this).scrollTop() > 500) {  
    $('.nav__content').addClass("sticky");
  }
  else{
    $('.nav__content').removeClass("sticky");
    
  }
}
if (screen.width >= 840) {
	if ($(this).scrollTop() > 1000) {  
    $('.nav__content').addClass("sticky");
  }
  else{
    $('.nav__content').removeClass("sticky");
    
  }
}
if (screen.width >= 560) {
	if ($(this).scrollTop() > 1520) {  
    $('.nav__content').addClass("sticky");
  }
  else{
    $('.nav__content').removeClass("sticky");
    
  }
}
	

});

link do pełnej http://x-zone.com.pl/new/order.htmlr.html

1

Po pierwsze usuńmy powtórzenia:

$(window).scroll(function() {
  var threshold;

  if (screen.width >= 1110) {
    threshold = 500;
  } else if (screen.width >= 840) {
    threshold = 1000;
  } else if (screen.width >= 560) {
    threshold = 1520;
  }

  if ($(this).scrollTop() > threshold) {
    $('.nav__content').addClass("sticky");
  } else {
    $('.nav__content').removeClass("sticky");
  }
});

Warunek odpowiedzialny za dodawanie/usuwanie klasy, również możemy uprościć zgodnie z dokumentacją:

$(window).scroll(function() {
  var threshold;

  if (screen.width >= 1110) {
    threshold = 500;
  } else if (screen.width >= 840) {
    threshold = 1000;
  } else if (screen.width >= 560) {
    threshold = 1520;
  }
	
  var stickNavbar = $(this).scrollTop() > threshold;
  $('.nav__content').toggleClass("sticky", stickNavbar);
});

Dalej sobie podłub sam :)

0

wrzuciłem ale dalej ten sam problem

0

Dalej sobie podłub sam

Nie dałem Ci gotowego kodu..

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