How to make a header fixed after scrolling past it
Question
Want to make header become fixed to the top of the page after scrolling it to the top. Tried looking at other stackoverflow answers but can't seem to get my code to do what I want it to.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
</script>
</head>
<body>
<div id = "header">
<div id = "contents">
<img src ="unnamed.jpg">
</div>
</div>
<ul class ="nav">
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<div id = "page">
</div>
</body>
</html>
CSS
html, body, #header {
width:100%;
height:85%;
margin:0;
padding:0;
}
#header {
z-index:-1;
box-shadow:0px 1px 15px black;
}
#page {
margin-top:-20px;
background-color:white;
}
#header #contents {
position:fixed;
z-index:-1;
left:50%;
top:30%;
transform: translate(-50%, -50%);
text-align:center;
}
.nav {
text-align:center;
background-color: rgb(233,204,148);
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
.nav li {
display:inline;
}
.nav a {
display: inline-block;
color: white;
padding: 30px 35px;
text-decoration: none;
margin-right:20px;
}
.nav li a:hover {
background-color: white;
color:rgb(233,204,148);
}
3 answers
solution1
0 ACCPTED 2017-02-13 07:00:11
<div id = "header">
<div id = "contents">
<img src ="unnamed.jpg">
</div>
</div>
<ul class ="nav" id="navBar">
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<div id = "page">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae suscipit laboriosam nobis eveniet? Atque asperiores, sunt, ad ducimus corrupti ipsam possimus eum deleniti ipsa saepe quasi dolores? Numquam ipsam, cum.</p>
</div>
$(window).scroll(function function_name (argument) {
if($(window).scrollTop() > 250){
$(".nav").addClass('fixedClass')
}
else{
$(".nav").removeClass('fixedClass')
}
})
html, body, #header {
width:100%;
height:85%;
margin:0;
padding:0;
}
#header {
z-index:-1;
box-shadow:0px 1px 15px black;
}
#page {
margin-top:-20px;
background-color:white;
}
#header #contents {
left:50%;
top:30%;
transform: translate(-50%, -50%);
text-align:center;
}
.nav {
text-align:center;
background-color: rgb(233,204,148);
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
.nav li {
display:inline;
}
.nav a {
display: inline-block;
color: white;
padding: 30px 35px;
text-decoration: none;
margin-right:20px;
}
.fixedClass{
position: fixed;
top: 0;
}
You need to check the scroll position to notify the header when to have a fixed position.
solution2
0 2017-02-13 07:25:15
Use this below code to make a header fixed after scrolling past it :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
top: 0;
width: 100%;
}
.affix + .container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:500px;padding-left: 0px; padding-right: 0px;">
<img src ="img/0.JPG" style="height: 500px;width: 100%;">
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="500">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Basic Topnav</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:1000px">
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
<h1>Some text to enable scrolling</h1>
</div>
</body>
</html>
solution3
0 2017-02-13 15:22:39
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js"></script>
</head>
<body>
<div id = "header">
<div id = "contents">
<img src ="unnamed.jpg">
</div>
</div>
<ul class ="nav nav-relative">
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
<div id = "page">
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
if(($('#header').is(':appeared'))){
$('.nav').removeClass('nav-fixed').addClass('nav-relative')
}
else {
$('.nav').removeClass('nav-relative').addClass('nav-fixed')
}
})
})
</script>
</body>
</html>
</body>
</html>
CSS
html, body, #header {
width:100%;
height:85%;
margin:0;
padding:0;
}
#header {
z-index:-1;
box-shadow:0px 1px 15px black;
}
#page {
margin-top:-20px;
background-color:white;
}
#header #contents {
position:fixed;
z-index:-1;
left:50%;
top:30%;
transform: translate(-50%, -50%);
text-align:center;
}
.nav {
text-align:center;
background-color: rgb(233,204,148);
list-style: none;
margin: 0;
padding: 0;
text-align:center;
}
.nav-fixed {
position: fixed;
top:0px;
width: 100%;
}
.fixedClass{
position: fixed;
top: 0;
}
.nav li {
display:inline;
}
.nav a {
display: inline-block;
color: white;
padding: 30px 35px;
text-decoration: none;
margin-right:20px;
}
.nav li a:hover {
background-color: white;
color:rgb(233,204,148);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
fixed menu that is fixed after scrolling past a div
DIV nav appear after scrolling past header
Change background of fixed header when scrolling past elements
Failing to make my navbar (no frameworks/libraries) to stick after scrolling past header
How to have a fixed header after some vertical scrolling?
fixed header jumps after scrolling down the page
Making an image appear after scrolling past header - attempts not working?
How to add class after scrolling past anchor?
How to Smoothly Prevent a Fixed Element from Scrolling Past A Specified Element
Make multiple divs position fixed after scrolling
Related Tags