Задать вопрос
@dead_archee
javascript

Как допилить нормально шапку?

Я абсолютный новичок, сразу говорю. В чем суть вопроса. Я сделал фиксированную шапку. При скролле она меняет свой цвет и цвет текста. Когда обновляешь страницу и без скролла наводишь курсор на текст в шапке, цвет меняется на синий. При скролле шапка становится белой, а текст черным, чтобы шапка не сливалась с контентом. Но когда возвращаешься наверх, шапка возвращает свой исходный вид, а вот при наведении курсора на текст цвет текста не меняется. Не понимаю как пофиксить... 

<script>
		$(window).scroll(function() {
		    if ($(this).scrollTop() > 1){  
		        $('header').addClass("sticky");
		        $(".header__logo").css({"color": "black"});
		        $(".nav__link").css({"color": "black"});
		    }
		    else{
		        $('header').removeClass("sticky");
		        $(".header__logo").css({"color": "white"});
		        $(".nav__link").css({"color": "white"});
		    }
		});
</script>
	<title>SportForMe</title>
</head>
<body>

	<header class="header">
		<div class = "container">
			<div class="header__inner">
				<div class="header__logo">SportForMe</div>
				<nav class="nav">
					<a class = "nav__link" href="#home">Home</a>
					<a class = "nav__link" href="#description">Description</a>
					<a class = "nav__link" href="#motivation">Motivation</a>
					<a class = "nav__link" href="#advice">Advice</a>
					<a class = "nav__link" href="#">Contacts</a>
				</nav>
			</div>
		</div>
	</header>


.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
	padding-top: 5px;
	transition: all 0.4s ease;
}

.header.sticky {
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	width: 100%;
	padding-top: 5px;
	background-color: #fff;
	transition: all 0.4s ease;
}

.header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.header__logo {
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	padding-bottom: 10px;
}

.nav {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.nav__link {
	color: #fff	;
	text-decoration: none;
	font-family: 'Comfortaa', cursive;
	transition: color .3s linear;
	display: inline-block;
	vertical-align: top;
	margin: 0 20px;
	position: relative;

}

.nav__link:after {
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	opacity: 0;
	background-color: #2015b5;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1;
	transition: opacity .3s linear;
}

.nav__link:hover {
	color: #2015b5;
}

.nav__link:hover:after{
	opacity: 1;
}
  • Вопрос задан
  • 151 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
AntonLitvinenko
@AntonLitvinenko
HTML coder
не нужно задавать инлайновые стили через js. все эти стили можно отнаследовать от класса .sticky, а перебить инлайновые стили с помощью просто цсс сложнее.
Например
.page-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	padding: 20px 0;
	background-color: #292929;
	transition: padding .25s;
	z-index: 100;
}

.page-header.scroll {
	padding: 10px 0;
	background-color: #fff;
	box-shadow: 0 5px 15px rgba(0,0,0,.05);
}

.page-header.scroll .main-menu a {
	color: #292929;
}

.page-header.scroll .main-menu a:hover {
	color: #06bbc7;
}

.main-menu a {
	color: #e5e5e5;
}

.main-menu a:hover {
	color: #06bbc7;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать проект Площадки для дизайнеров интерьеров
22 нояб. 2024, в 10:19
10000 руб./за проект
Сделать верстку двух страниц из фигмы
22 нояб. 2024, в 09:58
5000 руб./за проект
Доделать проект
22 нояб. 2024, в 09:57
3000 руб./за проект
Ещё заказы