усовершенствовать js код

198
02 августа 2017, 22:54

При скроллинге страницы с хедером должны происходить некоторые изменения типа уменьшение ширины, появления margin-top, transform: rotate, решил через classList.add писать, ибо через style.property еще ужаснее выглядит.
Посоветуйте что-нибудь дабы код нормально выглядел:

window.onscroll = function () {
  var scrolled = window.pageYOffset,
    header = document.querySelector('header'),
    topHeader = document.querySelector('.topHeader'),
    subHeader = document.querySelector('.subHeader');
  if (scrolled > 1000) {
    header.classList.add('minWidth');
    header.style.top = scrolled + 'px';
  } else {
    header.classList.remove('minWidth');
    header.style.top = '0';
  }
  if (scrolled > 2000) {
    topHeader.classList.add('mTop');
  } else {
    topHeader.classList.remove('mTop');
  }
  if (scrolled > 3000) {
    topHeader.classList.add('maxHeight');
  } else {
    topHeader.classList.remove('maxHeight');
  }
  if (scrolled > 4000) {
    subHeader.classList.add('dblock');
  } else {
    subHeader.classList.remove('dblock');
  }
}
Answer 1

window.addEventListener("scroll", function() { 
	let Y = this.pageYOffset+this.innerHeight, 
		h = document.querySelector('header'), 
		tH = document.querySelector('.topHeader'), 
		sH = document.querySelector('.subHeader'); 
	[[1000,h,"minWidth"],[2000,tH,"mTop"],[3000,tH,"maxHeight"],[4000,sH,"dblock"]] 
	.filter((a)=>a[1].classList[Y > a[0] ? "add" : "remove"](a[2])); 
});
html { height: 4100px } 
 
body *::before { position: fixed; content: attr(class) } 
 
.topHeader::before { margin-top: 20px } 
 
.subHeader::before { margin-top: 40px }
<header></header> 
<div class="topHeader"></div> 
<div class="subHeader"></div>

Answer 2
window.onscroll = function () {
  var scrolled = window.pageYOffset,
    header = qS('header'),
    topHeader = qS('.topHeader'),
    subHeader = qS('.subHeader'),
    a = scrolled > 1000,
    b = scrolled > 2000,
    c = scrolled > 3000,
    d = scrolled > 4000;
  if (!!a) {
    header.classList.add('minWidth');
    header.style.top = scrolled + 'px';
  } else {
    header.classList.remove('minWidth');
    header.style.top = '0';
  }

  function qS(el) {
    return document.querySelector(el);
  }

  function checkPos(condition, elem, className) {
    if (!!condition) {
      return elem.classList.add(className)
    } else {
      return elem.classList.remove(className)
    }
  }
  checkPos(b, topHeader, 'mTop');
  checkPos(c, topHeader, 'maxHeight');
  checkPos(d, subHeader, 'dblock');
}
Answer 3

А может как то так? На работоспособность не проверял :(

window.onscroll = function () {
var scrolled = window.pageYOffset,
header = document.querySelector('header'),
topHeader = document.querySelector('.topHeader'),
subHeader = document.querySelector('.subHeader');
function move(headerType, addOrRemove, styleClass){
    headerType.classList.addOrRemove(styleClass);
}
switch(scrolled){
  case scrolled > 1000: move(header, add, minWidth);
                        header.style.top = scrolled + 'px';
                        break;
  case scrolled > 2000: move(topHeader, add, mTop);
                        break;
  case scrolled > 3000: move(topHeader, add, maxHeight);
                        break;
  case scrolled > 4000: move(topHeader, add, dblock);
                        break;  
  default: move(header, remove, minWidth);
           header.style.top = '0';
           move(header, remove, mTop);
           move(header, remove, maxHeight);
           move(header, remove, dblock);
           break;                                                              
}
}
READ ALSO
Как получить информацию из alert

Как получить информацию из alert

Мне нужно получить информацию, выдаваемую в alert + prompt и занести её в js скриптНе знаю с какой стороны подступиться

177
jquery.min.js:4 Uncaught TypeError: Cannot read property &#39;temperature&#39; of undefined

jquery.min.js:4 Uncaught TypeError: Cannot read property 'temperature' of undefined

Есть javascript код, который выдаёт такую ошибку:

219
Проблема при закрытии модального окна

Проблема при закрытии модального окна

При нажатии на кнопку закрытии модального окна или просто на область вне окна, окно закрывается, но с багом, после закрытия, оно еще раз появляется...

263
Прокрутка вверх

Прокрутка вверх

Как сделать прокрутку к верху страницы при открытии каждого нового элемента? Не используя якоря и гиперссылкиТ

183