Исправляем баг на empiresuit.com

Исправляем баг на empiresuit.com
Обложка Исправляем баг на empiresuit.com
Автор:
Руслан Шкарбан — автор статьи Руслан Шкарбан
#Советы

Признаться не одним интернет-маркетингом сыты, поэтому как-то просматривая видео блоггера Асима Амирова заглянули на сайт его интернет-магазина и на глаза попался очевидный баг: навигация на сайте не была адаптирована под скролл, когда она находила на белый фон, то из-за своей прозрачности и белого текста становилась просто не читаемой.

Выглядело это так:

Баг с меню

Решение

Чтобы смоделировать проблему мы скопировали верстку и стили с сайта и добавили их на jsfiddle.net. Затем, написали функцию для отслеживания скролла:

/*Исправление бага с меню
https://ctr99.ru/
*/

window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset;
  const headerElement = document.querySelector('.site-header');

	if (scrollTop > 0) {
		if (window.innerWidth > 768) { //на разрешении меньше 768 отображается нормально
			headerElement.style.backgroundColor = '#2d2d2d';
			headerElement.style.padding = '10px';
			headerElement.style.color = '#fff';		
		} 
	} else {
		if (window.innerWidth > 768) {
			headerElement.style.background = 'none';
			headerElement.style.padding = 'none';
			headerElement.style.color = ''; 
		}
	}  
});

Исправленный вариант в песочнице jsfiddle.net выглядит так:

Исправленный баг

Если у вас похожий баг или хотите просто посмотреть код, то в упрощенном варианте можно посмотреть тут:

Чтобы убедиться в работоспособности нашего решения загрузим его в консоль сайта и проверим поведение навигации.

Исправленный баг

Баг решен

Рассмотрели решение случайно обнаруженного бага в интернет-магазине популярного блоггера. Данный материал отправим Асиму, чтобы он передал разработчикам. Если на своем сайте вы видите мелкие огрехи или явно неправильное поведение, то пишите нам, будем рады помочь.