I am trying to achieve a specific effect on my website. In the folder, I have the following files:
- index.html
- style.css
- script.js
My goal is to make the navigation with id #menu stick to the top of the page when I scroll, similar to how it works on . However, I am only familiar with html and css.
Here is a snippet from my index.html file:
<!DOCTYPE html>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<header id="main-header">
<h1>Title</h1>
<h2>Slogan</h2>
</header>
<nav id="menu">
</nav>
<section id="main-section">
</section>
<footer id="main-footer">
© 2014 Copyright
</footer>
This is a portion of my style.css file:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
}
body {
margin: 0;
}
h1 {
font-size: 3em;
margin: 0;
}
h2 {
font-size: 2em;
margin: 0;
}
#main-header {
background: #08c;
color: #fff;
height: 10em;
padding: 2em;
text-align: center;
}
// More CSS styling here...
The script.js file contains the following code:
$(document).ready(function() {
var menu = $("#menu");
var pos = menu.position();
$(window).scroll(function() {
if ($(window).scrollTop() >= pos.top) {
menu.addClass("sticky");
} else {
menu.removeClass("sticky");
}
});
});