Wyłączenie javascriptu po zmniejszeniu szerokości strony

Wyłączenie javascriptu po zmniejszeniu szerokości strony
Gibon378
G3
Gibon378
G3
  • Rejestracja:ponad 4 lata
  • Ostatnio:około 3 lata
  • Postów:10
0

Jest możliwość wyłączenia tego kodu, gdy strona zmniejszy szerokość do mniej niż 775px? (kod zmniejsza wysokość nawigacji, ale uniemożliwia to zrobienie wersji mobilnej).

Kopiuj
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 40 ||                   
    document.documentElement.scrollTop > 40) {
    document.getElementById("nav").style.height = "60px";
    document.getElementById("nav").style.backgroundColor = "rgb(32, 32, 32, 0.95)";
    document.getElementById("logo").style.width = "200px";
    document.getElementById("nav2.1").style.fontSize = "18px"; 
  } else {
    document.getElementById("nav").style.height = "90px";
    document.getElementById("nav").style.backgroundColor = "#202020";
    document.getElementById("logo").style.width = "300px";
    document.getElementById("nav2.1").style.fontSize = "20px";
  }
}
edytowany 2x, ostatnio: cerrato
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Freja Draco
Freja Draco
Freja Draco
Freja Draco
  • Rejestracja:około 7 lat
  • Ostatnio:ponad 3 lata
  • Postów:3394
4
Kopiuj
If (window.innerWidth<775) ...
G3
Działa, ale tylko gdy odświeży się stronę. Da się jakoś w czasie rzeczywistym? (jak media query w css)
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Yukiteru Gromadzki
Yukiteru Gromadzki
Yukiteru Gromadzki
Yukiteru Gromadzki
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad rok
  • Postów:192
5

Działa, ale tylko gdy odświeży się stronę. Da się jakoś w czasie rzeczywistym? (jak media query w css)

Tak?

Kopiuj
window.onresize = _ => { 
    if(window.innerWidth<775) {

    }
}
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Gibon378
G3
Gibon378
G3
  • Rejestracja:ponad 4 lata
  • Ostatnio:około 3 lata
  • Postów:10
0

Jestem zielony w js :/
W tej chwili wygląda to tak:

Kopiuj

window.onscroll = function() {scrollFunction()};

if (window.innerWidth >= 775) {
    
function scrollFunction() {
  if (document.body.scrollTop > 40 ||                   document.documentElement.scrollTop > 40) {
    document.getElementById("nav").style.height = "60px";
    document.getElementById("nav").style.backgroundColor = "rgb(32, 32, 32, 0.95)";
    document.getElementById("logo").style.width = "200px";
    document.getElementById("nav2.1").style.fontSize = "18px"; 
  } else {
    document.getElementById("nav").style.height = "90px";
    document.getElementById("nav").style.backgroundColor = "#202020";
    document.getElementById("logo").style.width = "300px";
    document.getElementById("nav2.1").style.fontSize = "20px";
  }
}}
edytowany 1x, ostatnio: cerrato
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Yukiteru Gromadzki
Yukiteru Gromadzki
Yukiteru Gromadzki
Yukiteru Gromadzki
  • Rejestracja:ponad 6 lat
  • Ostatnio:ponad rok
  • Postów:192
3

O coś takiego ci chodzi?

Kopiuj
window.onscroll = (_) => {
  if (window.innerWidth >= 775) {
    if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40 ) {
      document.getElementById("nav").style.height = "60px";
      document.getElementById("nav").style.backgroundColor =
        "rgb(32, 32, 32, 0.95)";
      document.getElementById("logo").style.width = "200px";
      document.getElementById("nav2.1").style.fontSize = "18px";
    } else {
      document.getElementById("nav").style.height = "90px";
      document.getElementById("nav").style.backgroundColor = "#202020";
      document.getElementById("logo").style.width = "300px";
      document.getElementById("nav2.1").style.fontSize = "20px";
    }
  }
};

Jeżeli chcesz wywoływać funkcję to możesz tak:

Kopiuj
const scrollFunction = (_) => {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    document.getElementById("nav").style.height = "60px";
    document.getElementById("nav").style.backgroundColor =
      "rgb(32, 32, 32, 0.95)";
    document.getElementById("logo").style.width = "200px";
    document.getElementById("nav2.1").style.fontSize = "18px";
  } else {
    document.getElementById("nav").style.height = "90px";
    document.getElementById("nav").style.backgroundColor = "#202020";
    document.getElementById("logo").style.width = "300px";
    document.getElementById("nav2.1").style.fontSize = "20px";
  }
};

window.onscroll = (_) => {
  if (window.innerWidth >= 775) {
    scrollFunction();
  }
};
G3
Jak odświeżę, gdy strona ma mniej niż 775px, a potem rozszerzę to faktycznie nawigacja kurczy się, ale jeśli potem zwężę stronę, to trzeba odświeżyć :/
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj
Riddle
Riddle
Riddle
Riddle
Administrator
  • Rejestracja:prawie 15 lat
  • Ostatnio:około godziny
  • Lokalizacja:Laska, z Polski
  • Postów:10076
3

A czemu to wgl chcesz robić w JS? Zmieniasz tu tylko style, więc media query to idealne rozwiązanie.

G3
Po prostu byłoby mniej syfu. Trochę było kombinowania, ale poradziłem sobie właśnie w css. Dzięki wszystkim za pomoc c:
Riddle
@Gibon378: CSS są stworzone dokładnie do tego celu, poza tym są deklaratywne, więc mniejsza szansa że zrobisz błąd, mają wsparcie sprzętowe. Nikt przy zdrowych zmysłach by tego nie robił w JS
G3
Bez kodu, który podał kolega wyżej, całość by nie działała jak należy.
Riddle
@Gibon378: Powinieneś tylko dodać klasę w JS, a resztę ostylować w CSS.
Udostępnij
Kopiuj link do postu Kopiuj link do postu jako Markdown
Komentuj

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto