Dynamiczna zmiana marginesu diva. Funkcja nie działa zaraz po załadowaniu strony.

Question

Witam.

Na początek kod

Z nudów zacząłem robić pseudo szablon strony, trochę responsywnej. Chciałbym żeby div o klasie "menu-bar" był cały czas przyklejony do górnej krawędzi strony. Używając pozycjonowania "sticky" działa tak jak powinno, jednak chciałbym wykorzystać pozycjonowanie "fixed", dlatego podłączyłem skrypt js, który ma pobrać wysokość klasy "menu-bar" i zmieniać margines klasy "main-container" o wartość wysokości menu (tak żeby menu nie zasłaniało głównego kontenera). Skrypt powinien się ładować kiedy strona jest gotowa, ale nie działa. 

---

Cannot read property '0' of undefined     -to wyskakuje w konsoli po odświerzeniu

---

Chciałbym też żeby margines zmieniał się dynamicznie.

Moje pytania brzmią, czy to co próbuję zrobić w ogóle ma sens? Może jest na to znacznie prostszy sposób?

Comments

Czyli mam rozumieć, że są jakby 2 rozwiązania, tak?

---

document.addEventListener("DOMContentLoaded", function (){
	
	var container=document.getElementsByClassName("main-container");
	
	var menubar=document.getElementsByClassName("menu-bar");
	
	var menubar_height=menubar[0].offsetHeight;
		
container[0].style.marginTop = menubar_height+17+"px";

});
                // --------------------

document.addEventListener("DOMContentLoaded", function (){
 
	var container=document.getElementsByClassName("main-container")[0];
 
	var menubar=document.getElementsByClassName("menu-bar")[0];
  
	var menubar_height=menubar.offsetHeight;
 
	container.style.marginTop = menubar_height+17+"px";
});

 

I tak i tak działa. Jeszcze potrzebuję pomocy w tym, żeby to skalowało się dynamicznie.

---

Jak do tej pory zrobiłem coś takiego. Niby w konsoli nie ma błędów, ale kiedy się odświeża stronę raz za razem, margines co kilka kliknięć zmienia się na mniejszy o kilka px, za następne kilka klików zmienia się znów. Nie mam pojęcia dlaczego.

function resizing(){
	
	var container=document.getElementsByClassName("main-container");
	
	var menubar=document.getElementsByClassName("menu-bar");
	
	var menubar_height=menubar[0].offsetHeight;
		
container[0].style.marginTop = menubar_height+17+"px";
  
 }
 document.addEventListener("DOMContentLoaded", function (){resizing()});
 window.onresize = function (){resizing()};

 

Answer 1

1.To działa ale błąd jest w tym, że

document.container[0]

to nie jest właściwość więc obiekt document nie jest potrzebny.

2.

var menubar_height=menubar.offsetHeight;

menubar to HTMLCollection więc musisz wyodrębnić pierwszy element

menubar[0].offsetHeight;

3. Pozostaje podstawić menubar_height + "px" tam gdzie dałeś 532px;

Answer 2

No to miałeś 3 błędy:

1. Przy ClassName , należy dodać, do którego elementu będziesz się odwoływał.
2. Przy container niepotrzebnie dodałeś document , oraz liczbę na końcu
3. Do testów lepsza byłaby informacja czy, pobrana jest wartość elementu
 

document.addEventListener("DOMContentLoaded", function (){

var container=document.getElementsByClassName("main-container")[0];

var menubar=document.getElementsByClassName("menu-bar")[0];

alert(menubar.offsetHeight);
console.log(menubar.offsetHeight);

var menubar_height=menubar.offsetHeight;

container.style.marginTop = "532px"; //te 532px to tak na próbę,
});