0

При скроллинге страницы с хедером должны происходить некоторые изменения типа уменьшение ширины, появления 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');
  }
}
5
  • одинаковый код можно в функцию вынести
    – Grundy
    2 авг 2017 в 7:01
  • я понимаю, но не могу ее придумать
    – ur pride
    2 авг 2017 в 7:03
  • 1
    как минимум 3 последних if у тебя полностью одинаковые. переносишь этот код в функцию, и параметрами передаешь смещение, элемент и класс
    – Grundy
    2 авг 2017 в 7:05
  • Крайне рекомендуется дебаунсить обработчик onscroll потому что он происходит дохрена раз 2 авг 2017 в 8:28
  • @УткаУчитсяУму, и так сойдет :-)
    – Grundy
    2 авг 2017 в 8:33

3 ответа 3

0

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>

1
  • мне нравится, спасибо)
    – ur pride
    2 авг 2017 в 8:43
-1
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');
}
2
  • что еще можно тут сделать??
    – ur pride
    2 авг 2017 в 7:23
  • !! не нужен - выражения и так bool
    – Grundy
    2 авг 2017 в 8:34
-2

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

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;                                                              
}
}
3
  • тож думал о свич-кейсе, щас проверим, спасибо)
    – ur pride
    2 авг 2017 в 7:22
  • 1
    Выражение после case приводится к логическому true/false а уже потом проводится сравнение с scrolled. Иными словами: switch / case так не работает! 2 авг 2017 в 7:28
  • написал switch(true) case scrolled>1000, может сработает, так функция move ругается на add и remove
    – ur pride
    2 авг 2017 в 7:41

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.