Minimal Header effect with Jquery

portugalcoin (72)in #utopian-io • 7 years ago (edited)

Source

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

Posted on Utopian.io - Rewarding Open Source Contributors

#jquery #howto #minimalheader

7 years ago in #utopian-io by portugalcoin (72)

Sort:

cha0s0000 (65) 7 years ago

Thank you for the contribution. It has been approved.

good work

You can contact us on Discord.
[utopian-moderator]

$1.11

1 vote

[-]

portugalcoin (72) 7 years ago

Thank you very much for your words.
Hug

$0.00

[-]

utopian.tip (46) 7 years ago

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!

$0.00

[-]

aleister (70) 7 years ago

Well done my friend, interesting content and very professional presentation. Cheers

$0.00

[-]

portugalcoin (72) 7 years ago

Thanks @aleister , this tutorial has worked hard but it is a very interesting effect to put on websites.:)

$0.00

[-]

utopian-io (71) 7 years ago

Hey @portugalcoin I am @utopian-io. I have just upvoted you!

Achievements

You have less than 500 followers. Just gave you a gift to help you succeed!
Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

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

$0.00

[-]

mafaldation (58) 7 years ago

És um espectáculo! ;)

$0.00

[-]

portugalcoin (72) 7 years ago

Obrigado :)

$0.00