What Will I Learn?
- You will learn how to create minimal header with scroll on your site.
- Creating animation of the fixed header in the site when it detects that when scrolling is about an element of the site.
Requirements
- Basic knowledge about HTML.
- Basic knowledge about CSS.
- Basic knowledge about Jquery.
- You have to install / host the jQuery file or you can add jQuery CDN if you don't want to install or host it.
- To try out the code in this tutorial you will need a code editor and browser.
Difficulty
- Basic
Tutorial Contents
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.
- Open your code editor
- Create a new file and save as
index.html - Add html base code
<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>
(html comment removed: div example 1 )
<div class="exampleDiv1">DIV 1</div>
(html comment removed: div example 2 )
<div class="exampleDiv2">DIV 2</div>
(html comment removed: div example 3 )
<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)
Curriculum
- Tutorial: Jquery animation scroll with anchors
- Tutorial:How to add breadcrumb in wordpress
- Tutorial: How to create a data table with filters and Import & Export data table (Wordpress)
- Tutorial: How to use Lazy Load in Wordpress
- Tutorial: How to use EU Cookie Law (Wordpress)
- Tutorial: How to use tawk.to in wordpress
- Tutorial: Wordpress: Album and Image Gallery Plus Lightbox
- Tutorial: Wordpress: WP Multilang
- Tutorial: How to use disabe comments plugin
- Tutorial: How to use duplicate pages plugin (Wordpress)
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
good work
You can contact us on Discord.
[utopian-moderator]
Thank you very much for your words.
Hug
Hey @cha0s0000, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Well done my friend, interesting content and very professional presentation. Cheers
Thanks @aleister , this tutorial has worked hard but it is a very interesting effect to put on websites.:)
Hey @portugalcoin I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
És um espectáculo! ;)
Obrigado :)