problem z responsive :: 4programmers.net

loose

2017-10-25T17:53:31+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 1

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ł

Kopiuj

$(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 www : http://x-zone.com.pl/new/order.html

Desu

2017-10-25T19:44:53+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 1788

Po pierwsze usuńmy powtórzenia:

Kopiuj

$(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ą:

Kopiuj

$(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 :)