Transparent Fixed Header Html, Css, JavaScript

 Transparent Fixed Header Html, Css, JavaScript
Okunuyor Transparent Fixed Header Html, Css, JavaScript
GitHub

https://github.com/theprogrammingexpert/instagram

HTML CODE

<nav>
	<span> The Programming Expert </span>
	<ul>
		<li>
			<a href="#home"> HOme </a>
		</li>
		<li>
			<a href="#about"> About </a>
		</li>
	</ul>
</nav>


<section id="home"></section>
<section id="about"></section>

————————————————————————————————————————————————–

CSS CODE

* {
	margin: 0;
	padding: 0;
	border: none;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Open Sans', sans-serif;
}

a { 
	text-decoration: none;
	color: #fff;
	transition: opacity .2s;
}

a:hover {
	opacity: .6;
}

section {
	height: 100vh;
}

#home {
	background: url('link-to-your-image-jpg') no-repeat center center;
	background-size: cover;
	
	position: relative;
}

#home::before {
	display: block;
	content: '';
	
	width: 100%;
	height: 100%;
	
	position: absolute;
	left: 0;
	top: 0;
	
	background: #4d0d12;
	opacity: .2;
}


nav {
	display: flex;
	padding: 48px 56px;
	background: transparent;
	
	user-select: none;
	
	position: fixed;
	left: 0;
	top:  0;
	width: 100%;
	z-index:100;
	
	transition: background .4s, padding .4s;
}

nav span {
	color: #FF4754;
	font-weight: 700;
}

nav nul {
	list-style-type: none;
	margin-left: auto;
	display: flex;
}

nav ul li:not(:first-child) {
	margin-left: 32px;
}

/* this class gets added, depending on the current scrooll height */
nav._fixed {
	background: #121212;
	padding: 24px 40px;
}

————————————————————————————————————————————————–

JAVASCRIPT CODE

let isTransparent = ture;
const nav = document.querySelector('nav');

window.addEventListener('scroll', event => {
	if (window.pageYOffset > 70 && isTransparent) {
		nav.classList.add('_fixed');
		isTransparent = false;
	}
	
	if (window.pageYOffset <= 70 && !isTransparent) {
		nav.classList.remove('_fixed');
		isTransparent = true;
	}
});

I hope this lesson is be usefu for you. Get more Success.

Yapılan Yorumlar

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.