Set width: full 320 480 640 768 1024 1920 custom
<!-- Sticky Header with Scroll Hide/Show Template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Header with Scroll Hide/Show</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: #f7f7f7;
}
.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #444;
color: #fff;
padding: 1rem 2rem;
z-index: 1000;
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
transition: transform 0.3s;
display: flex;
align-items: center;
justify-content: space-between;
}
.sticky-header.hide {
transform: translateY(-100%);
}
.header-title {
font-size: 1.3rem;
font-weight: bold;
letter-spacing: 1px;
}
.main-content {
margin-top: 80px;
max-width: 800px;
padding: 2rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0,0,0,0.07);
margin-left: auto;
margin-right: auto;
}
@media (max-width: 600px) {
.sticky-header { padding: 1rem; flex-direction: column; align-items: flex-start; }
.header-nav { margin-top: 0.5rem; }
.header-nav a { margin-left: 1rem; }
.main-content { padding: 1rem; }
}
</style>
</head>
<body>
<header class="sticky-header" id="stickyHeader">
<div class="header-title">Sticky Header</div>
</header>
<div class="main-content">
<h1>Sticky Header with Scroll Hide/Show</h1>
<p>Scroll down to see the header hide, and scroll up to see it reappear.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod. Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum. Aliquam eget odio sed ligula iaculis consequat at eget orci. Mauris molestie sit amet metus mattis varius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod. Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum. Aliquam eget odio sed ligula iaculis consequat at eget orci. Mauris molestie sit amet metus mattis varius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur consectetur, nisl nisi consectetur nisi, euismod euismod nisi nisi euismod. Mauris non tempor quam, et lacinia sapien. Mauris accumsan eros eget libero posuere vulputate. Etiam elit elit, elementum sed varius at, adipiscing vitae est. Sed nec felis pellentesque, lacinia dui sed, ultricies sapien. Pellentesque orci lectus, consectetur vel posuere posuere, rutrum eu ipsum. Aliquam eget odio sed ligula iaculis consequat at eget orci. Mauris molestie sit amet metus mattis varius.</p>
<p style="height: 2500px;"></p>
<p>End of content.</p>
</div>
<script>
let lastScrollY = window.scrollY;
const header = document.getElementById('stickyHeader');
window.addEventListener('scroll', () => {
if (window.scrollY > lastScrollY && window.scrollY > 60) {
header.classList.add('hide');
} else {
header.classList.remove('hide');
}
lastScrollY = window.scrollY;
});
</script>
</body>
</html>