With this tutorial you will learn to create a minimal header when you are scrolling and detecting what is on an element of the site.
This tutorial has the particularity of explaining how to put the element to detect when you are scrolling over the element we want for the header to become smaller.
It's quite interesting because in most sites this functionality occurs after the first few moments that the scroll and with this tutorial will be able to do the same effect in any zone of the site.
index.html<html>
<head>
<title>Minimal Header with Jquery</title>
</head>
<body>
</body>
</html>
Let's create content for the site to make it possible to scroll.
<html>
<head>
<style>
header{
top: 0px;
background-color:#000;
height: 100px;
padding-top: 50px;
color:#fff;
text-align:center;
}
.exampleDiv1, .exampleDiv2, .exampleDiv3{
background-color: #fff;
text-align:center;
padding: 250px 0px 250px 0px;
}
.exampleDiv2{
background-color: #000;
color:#fff;
}
footer{
height: 50px;
background-color:#000;
color:#fff;
text-align:center;
}
</style>
<title>Minimal Header with Jquery< /title>
</head>
<body>
<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>
</header>
<div class="exampleDiv1">DIV 1</div>
<div class="exampleDiv2">DIV 2</div>
<div class="exampleDiv3">DIV 3</div>
<footer>
<p>FOOTER</p>
</footer>
</body>
</html>
Now we have the site with content to be possible.
Let's set the header so that we can then give the minimal header effect by passing over an element.
In the class header we add the following css.
We set the header to the top and give an animation with a transition time position: fixed; transition: all .4s ease-out;.
header{
top: 0px;
background-color:#000;
height: 100px;
color:#fff;
text-align:center;
padding-top: 50px;
position: fixed;
transition: all .4s ease-out;
width: 100%;
}
We create a new class for when detecting the element of the site with the scroll minimize the header bar.
header.minimal{
height: 30px;
padding-top: 15px;
}
After performing these steps, we get our index.html file like this:
<html>
<head>
<style>
header{
top: 0px;
background-color:#000;
height: 100px;
padding-top: 50px;
color:#fff;
text-align:center;
position: fixed;
transition: all .4s ease-out;
width: 100%;
}
header.minimal{
height: 30px;
padding-top: 15px;
}
.exampleDiv1, .exampleDiv2, .exampleDiv3{
background-color: #fff;
text-align:center;
padding: 250px 0px 250px 0px;
}
.exampleDiv2{
background-color: #000;
color:#fff;
}
footer{
height: 50px;
background-color:#000;
color:#fff;
text-align:center;
}
</style>
<title>Minimal Header with Jquery</title>
</head>
<body>
<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>
</header>
<div class="exampleDiv1">DIV 1</div>
<div class="exampleDiv2">DIV 2</div>
<div class="exampleDiv3">DIV 3</div>
<footer>
<p>FOOTER</p>
</footer>
</body>
</html>
To use jQuery, we need to install or host it. We can also add jQuery CDN. For more details you can visit an official jquery website. In this tutorial, I use Google's CDN. Add the CDN in the < head> element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Now we need to make the scroll detect the div to effect the minimal header.
The $(window).bind("load", function() function to only execute my piece of code after finishing the load of the page.
I used a technique to detect the location of the element, ie how far from the top.
Then I put the scroll $(document).scroll(function() event so that I can know where the top element is at any moment.
distance = $ (".exampleDiv2").offset().top;This function tells you the distance from the top of the page.
If the value of the position of the scroll is greater than the distance of the element of the top, it means that we are touching the element and then add the class minimal to reduce from the css our header and give the effect of minimal header.
If it gets smaller the distance removes the class .minimal and removes the effect of minimal header.
<script>
$(window).bind("load", function() {
$(document).scroll(function(){
var distance = 0;
distance = $ (".exampleDiv2").offset().top;
if ($(this). scrollTop () >= distance ) {
$("header").addClass ("minimal") ;
}else{
$("header").removeClass ("minimal") ;
}
} );
} );
< /script>
The complete code would look like this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
header{
top: 0px;
background-color:#000;
height: 100px;
color:#fff;
text-align:center;
padding-top: 50px;
position: fixed;
transition: all .4s ease-out;
width: 100%;
}
header.minimal{
height: 30px;
padding-top: 15px;
}
.exampleDiv1, .exampleDiv2, .exampleDiv3{
background-color: #fff;
text-align:center;
padding: 250px 0px 250px 0px;
}
.exampleDiv2{
background-color: blue;
color:#fff;
}
footer{
height: 50px;
background-color:#000;
color:#fff;
text-align:center;
}
</style>
<title>Minimal Header with Jquery</title>
</head>
<body>
<header>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>
</header>
<div class="exampleDiv1">DIV 1</div>
<div class="exampleDiv2">DIV 2</div>
<div class="exampleDiv3">DIV 3</div>
<footer>
<p id="banner">FOOTER</p>
</footer>
<script>
$(window).bind("load", function() {
$(document).scroll(function(){
var distance = 0;
distance = $('.exampleDiv2').offset().top;
if( $(this).scrollTop() >= distance ){
$("header").addClass("minimal");
}else{
$("header").removeClass("minimal");
}
});
});</script>
</body>
</html>
Here you can see the code of this tutorial working. LIVE DEMO (scroll down the page until you reach the blue element to see the effect of the minimal header)