JavaScript Kodum Daha Temiz Yazılabilir mi?

kaymakli 612 gün önce

363 defa görüntülendi

Merhaba, Bir Web Tasarımı Hazırlıyorum.
JavaScript'i yeni öğrenmeye başladım. Daha önceden hep hazır kodlar ile çalışıyordum.
Aşağıda Paylaşmış olduğum kodu kendim hazırladım. Sorunsuz çalışmakta. Fakat Kullanımı Doğrumu pek emin değilim.
Bu şekilde kullanmamın bana ileride bir problemi olurmu? veya daha temiz yazılabilirmi sizlere danışmak istedim

const selectBody			= document.querySelector('#body'),
	    selectTopbar		= document.querySelector('#topbar'),
 	    selectHeader		= document.querySelector('#header'),
 		selectButton		= document.querySelector('.menu-btn'),
		selectBack			= document.querySelector('.backdrop'),
 		selectMenu			= document.querySelector('.menu'),
		selectNextEl 		= selectHeader.nextElementSibling;
let 	topbarHeight		= selectTopbar.offsetHeight;

selectButton.onclick = () => {
	selectBody.classList.toggle('overflow-hidden');
	selectBack.classList.toggle('active');
	selectMenu.classList.toggle('active');
};

let headerScrolled = () => {
	if( window.scrollY > selectTopbar.offsetHeight ) {
		selectHeader.classList.add('scrolled');
		selectNextEl.style = 'margin-top: '+ (selectHeader.offsetHeight + 30) +'px;';
		topbarHeight = 0;
		styleUpdate();
	} else {
		selectHeader.classList.remove('scrolled');
		selectNextEl.style = 'margin-top: 30px;';
		topbarHeight = selectTopbar.offsetHeight;
		styleUpdate();
	}
}
addEventListener('scroll', headerScrolled);

function styleUpdate() {
	if( document.body.clientWidth < 769 ) {
		let top = topbarHeight + selectHeader.offsetHeight;
		selectBack.style = 'top: '+top+'px;';
		selectMenu.style = 'top: '+top+'px;';
	}
};

addEventListener('resize', styleUpdate);

styleUpdate();

Şimdiden yardımcı olabilecek arkadaşlara çok teşekkür ederim.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevap yaz

הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Cevaplar (1)

aykhan

604 gün önce

const select = (selector) => document.querySelector(selector);
const selectAll = (selector) => document.querySelectorAll(selector);

const selectBody = select('#body'),
      selectTopbar = select('#topbar'),
      selectHeader = select('#header'),
      selectButton = select('.menu-btn'),
      selectBack = select('.backdrop'),
      selectMenu = select('.menu'),
      selectNextEl = selectHeader.nextElementSibling;

let topbarHeight = selectTopbar.offsetHeight;

selectButton.onclick = () => {
  selectBody.classList.toggle('overflow-hidden');
  selectBack.classList.toggle('active');
  selectMenu.classList.toggle('active');
};

const headerScrolled = () => {
  const scrollY = window.scrollY;
  const scrolled = scrollY > selectTopbar.offsetHeight;
  
  selectHeader.classList.toggle('scrolled', scrolled);
  selectNextEl.style.marginTop = scrolled ? `${selectHeader.offsetHeight + 30}px` : '30px';
  topbarHeight = scrolled ? 0 : selectTopbar.offsetHeight;
  styleUpdate();
};

addEventListener('scroll', headerScrolled);

const styleUpdate = () => {
  if (document.body.clientWidth < 769) {
    const top = topbarHeight + selectHeader.offsetHeight;
    selectBack.style.top = `${top}px`;
    selectMenu.style.top = `${top}px`;
  }
};

addEventListener('resize', styleUpdate);
styleUpdate();

Böyle bişey

#012822