How to Create a Simple Website with HTML, CSS, and jQuery ( TypeB: Fixed Header & Footer )

How to Create a Simple Website (TypeB : Fixed Header & Footer) with HTML, CSS, and jQuery

How to Create a Simple Website (TypeB : Fixed Header & Footer) with HTML, CSS, and jQuery


 

 

Introduction & Demo

In this video, I’ll show you how to create a simple website having fixed header and footer.

If you want to create a one-page website, a fixed header and scroll animation are very helpful for visitors.

First, please check the demo page.

You will learn:
– Making fixed header and footer using CSS
– Adding Scroll Animation using jQuery

All you need is a text editor!
Hope you enjoy 🙂

 
 

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>The Simple Website</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
	<ul id="menu">
		<li class="site_name"><a href="index.html">SITE NAME</a></li>
		<li class="link"><a href="#theme1">&raquo; Theme1</a></li>
		<li class="link"><a href="#theme2">&raquo; Theme2</a></li>
		<li class="link"><a href="#theme3">&raquo; Theme3</a></li>
		<li class="link"><a href="#theme4">&raquo; Theme4</a></li>
	</ul>
</div>
 
<div id="contents">
	<h1 id="theme1">Theme1</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
 
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus. Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
 
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor. Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue. Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
 
<h1 id="theme2">Theme2</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
 
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus. Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
 
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor. Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue. Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
 
<h1 id="theme3">Theme3</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
 
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus. Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
 
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor. Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue. Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
 
<h1 id="theme4">Theme4</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium leo auctor luctus. Cras suscipit lectus sit amet tellus vestibulum porta. Nullam hendrerit ante erat, eget pretium nunc faucibus id. Integer ut urna tellus. In pharetra, lectus sed ornare facilisis, nisl ligula interdum massa, at vehicula libero enim id libero. Sed ac fringilla purus. Aenean finibus est sit amet faucibus porta. Integer interdum finibus tempor.</p>
 
<p>Phasellus nisi metus, bibendum a lorem quis, lobortis porttitor nisl. Vivamus quis mollis leo. Vestibulum aliquam arcu augue, ut efficitur urna ornare tincidunt. Aenean quis purus feugiat, lobortis libero ut, consectetur lacus. Praesent orci libero, tincidunt in magna condimentum, feugiat consequat ex. Nulla id erat vel dui lacinia ullamcorper sed vel lectus. Nulla facilisi. Aliquam rhoncus sem at ligula tincidunt, eu bibendum purus tempus. Nullam venenatis felis ante, at auctor purus aliquet sed. In egestas vulputate nulla, quis consequat dolor sagittis nec. Etiam molestie nisi enim, id dignissim magna tristique ut.</p>
 
<p>Duis vel purus fermentum, ultricies ligula id, pellentesque ex. Nunc at purus odio. Integer posuere, purus dictum varius finibus, tortor massa venenatis neque, sit amet laoreet diam tortor id ex. Nulla dictum sed arcu vel porttitor. Sed sodales rutrum risus et consequat. Mauris libero leo, posuere nec condimentum a, pellentesque sit amet augue. Morbi id velit varius, euismod turpis a, vestibulum leo.</p>
</div>
 
 
<a href="#contents" class="top">&#9650; Top</a>
 
<div id="footer">
	&copy; xxx All rights reserved.
</div>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(function(){
	
	// Click the link starting with #
	$('a[href^="#"]').click(function(){
		
		// Scroll speed (ms)
		var speed = 500;
		
		// Get href
		var href = $(this).attr("href");
		
		
		// Change backcolor
		$(".link").css('background-color', 'navy');
		
		if (href != "#contents") {
			$(this).parent("li").css('background-color', 'lightseagreen');
		}
		
		
		// Set target
		var target = $(href == "#" || href == "" ? "html" : href);
		
		// Get the position of target
		var position = target.offset().top;
		
		// Start animation
		$("body,html").animate({scrollTop:position}, speed, 'swing');
		
		return false;
		
	});
	
	
});
</script>
</body>
</html>
@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
 
/*
============================
	Common
============================	
*/
body {
	margin: 0;
	font-family: 'Open Sans', sans-serif;
}
 
 
/*
============================
	Header
============================	
*/
#header {
	background-color: navy;
	height: 60px;
	width: 100%;
	position: fixed;
}
 
ul#menu {
	width: 100%;
	padding: 0;
	margin: 0;
	list-style: none;
}
 
ul#menu li {
	float: left;
	padding: 20px 0 0 0;
	height: 60px;
	box-sizing: border-box;
}
 
li.site_name {
	width: 60%;
	text-align: left;
}
 
li.site_name a {
	color: white;
	text-decoration: none;
	padding-left: 30px;
}
 
li.link {
	width: 10%;
	text-align: center;
	
}
 
li.link a {
	color: white;
	text-decoration: none;
}
 
li.site_name a:hover, li.link a:hover {
	color: lightcyan;
}
 
 
/*
============================
	Contents
============================	
*/
 
#contents {
	width: 40%;
	margin: 0 auto;
	padding: 10px 0 130px 0;
}
 
h1 {
	padding-top: 100px;
}
 
.top {
	bottom: 50px;
	right: 50px;
	position: fixed;
	z-index: 100;
	color: navy;
}
 
 
/*
============================
	Footer
============================	
*/
 
#footer {
	background-color: navy;
	bottom: 0;
	width: 100%;
	height: 30px;
	position: fixed;
	box-sizing: border-box;
	text-align: center;
	color: white;
	font-size: 12px;
	padding-top: 6px;
}

 
 

References

Google Fonts: https://fonts.google.com/

 

About Sara

Working as a freelance programmer in Japan. I'll try to make coding as simple as possible. Hope you enjoy coding 🙂