Dziwne zachowanie funkcji przy ładowaniu strony

Question

witam, posiadam taką funkcje.
Gdy wywołuje ją tutaj:

$(document).ready(function(){ 
	
    $(".sticky").sticky({topSpacing:0});
	CheckNavWidth();
});

To dzieje się coś dziwne, otóż obie zmienne z funkcji przyjmują wartość równą rozmiarowi okna...
Wystarczy jednakże że włącze konsole albo zmniejsze, a następnie powiększe okno i wszystko jest w porządku.
Ktoś wie co mozę byc nie tak?

Answer 1

Twój element menu pewnie ma 100% szerokości okna dlatego szerokość jest taka sama.

Prościej będzie zrobić to w CSS + media queries

Comments

jeżeli zrobie to w CSS to potem jak dodam sobie do menu np 4 nowe elementy to bede musiał przerabiać kod poza tym chce pracować też z js/jq.

Elem,ent #menu ma tyle szerokości ile jest w nim elementów w danej chwili.
poza tym tak jak mówie dzieje się to tylko przy przeładowaniu strony, jeżeli zmienie rozmiar okna a potem wróce do tego sprzed zmiany to wszystko jest w porządku

---

jeżeli zrobie to w CSS to potem jak dodam sobie do menu np 4 nowe elementy to bede musiał przerabiać kod

Czemu tak sądzisz?

---

W CSS nie pobiore szerokości elementu i bede musiał na sztywno ustawić kiedy menu ma zmieniać się w to rozwijane.

---

Może i nie pobierzesz szerokości elementu(co jest zbędne), ale wystarczy jedna reguła media queries żeby zmienić na rozwijane menu.

---

Wiem o tym, wystarczy ustawić display ale mimo wszystko chciałbym to zrobić w jq.

---

Jeżeli ktoś wie jak pomóc i w czym może być problem to bardzo mi prosił o odpowiedź.
Zaznaczam że podczas wywoływania tej funkcji w resize wszystko jest dobrze i menu zmienia się wtedy kiedy powinno.

Answer 2

Zauważyłem pewną zależność.
Kiedy dodałem to wywołanie:  window.addEventListener("resize", CheckNavWidth());
nad to:
 $( window ).resize(function() { // funkcja wywołująca sie w momencie zmiany obszaru roboczego okna
 CheckNavWidth();
});

to teraz nie dzieje się to co działo się w pierwszym poście