JavaScript Kodum Daha Temiz Yazılabilir mi?

kaymakli 471 gün önce

296 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

Cevaplar (1)

aykhan

463 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