zwijane menu js

Question

    <div class="LogBac">
        <div class="logo ma bor2"></div>
        <div class="tim ma bor1"> czas </div>
        <div class="op fl borR"> Natura </div>
        <div class="op fr borL"> Zjawiska </div>
    </div>
    
    <div class="nav"> 
        <div class="mp fl bor1"> menu1 </div>
        <div class="mp fl bor1"> menu2 </div>
        <div class="mp fl bor1"> menu3 </div>
        
        <div class="mp2 fr bor1"> menu4 </div>
        <div class="mp2 fr bor1"> menu5 </div>
        <div class="mp2 fr bor1"> menu6 </div>
    </div>

 

<script>
		const nav = document.querySelector('#main'); 
		const topOfNav = nav.offsetTop;
		
		function fixNav() 
		{ 
			if(window.scrollY >= topOfNav) 
			{ 
				document.body.classList.add('fixed-nav'); 
			} 
			else 
			{ 
				document.body.classList.remove('fixed-nav'); 
			} 
		} 
		window.addEventListener('scroll', fixNav);
	</script>

 

 

i dostaje błąd:

 Uncaught TypeError: Cannot read property 'offsetTop' of null   at index.html:45

czyli : const topOfNav = nav.offsetTop; tutaj

 

(dopiero sie uczę używać JS i nie mam pojęcia czemu pokazuje mi sie ten błąd)

Answer 1

Zobacz w html, jak dajesz klase nav to pobieraj po klasie a nie id... ale lepieh zmienic w html moim zdaniem i doda idka żeby po nim pobrać referencje.