Platform 5 Meets Headroom.js

Greetings Everyone,

Going to start the week off with a mini tutorial that I hope you enjoy.

Over the weekend I was asked by a client if it was possible to hide the header when the user scrolls down and then make it visible when they scroll back up.

Uncertain if this would be easy to do or a pain in the ass, I started writing my own code and actually got it working.

But it wasn't as smooth as I liked it to be. So while I was searching for away to make it smoother I ran across Headroom.js and what a treat it was.

So what is Headroom.js?

Headroom.js is a lightweight, high-performance JS widget  that allows you to react to the user's scroll. It does all the heavy lifting for you once you get it set up. Basicly what it does is remove and adds classes as the user scrolls up and down the page.

How do I set it up?

There are some instructions on the headroom.js webpage if you would like to know more about the different ways you can setup headroom.js in your projects.

But to make easier on you have hosted the needed files to help get you up and running quickly.

Step 1).  Copy and paste these two links in your advanced area ( pagelines >settings > advanced)

<script type='text/javascript' 
src='https://8ad9530065ba68185eea3a8b328d1e9c278ad21a.googledrive.com/
host/0B1ZjzU15tGGbUXdJRjZlS0VfbEU/headroom.js'></script>
<script type='text/javascript' 
src='https://8ad9530065ba68185eea3a8b328d1e9c278ad21a.googledrive.com/
host/0B1ZjzU15tGGbUXdJRjZlS0VfbEU/jQuery.headroom.js'></script>

Step 2). Next add this bit of js below the two linked js libraries you just added.

<script>
jQuery('document').ready(function($){

//choose the element to target in this case it is the header
$("header").headroom({
offset : 25,
tolerance: {
down : 10,
up : 20
},
});

});
</script>

If you have done everything correctly your advanced area should look like this.

Step 3). So in order for the Headroom.js to remove and add classes you must first include the classes and declarations in your style sheet. Add the following CSS to your LESS editor.

.headroom {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all .2s ease-in-out;
}

/*adjust this if you have a big header or parts

of your header are still visible after the hide*/
.headroom--unpinned {
top: -100px;
}
.headroom--pinned {top: 0;}

header {
z-index: 1000;
}

Sorry I don't have a demo ready to show you but I did grab a quick video to see it in action.

IMPORTANT:  I attempted this with the framework theme and Platform 5.

Alright guys I hope you enjoyed this tutorial as always be sure to share and  Like Us On Facebook .

~Aires

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


iheart pagelines

Platform 5 Meets Headroom.js

Published on by | Add Comment

Greetings Everyone,

Going to start the week off with a mini tutorial that I hope you enjoy.

Over the weekend I was asked by a client if it was possible to hide the header when the user scrolls down and then make it visible when they scroll back up.

Uncertain if this would be easy to do or a pain in the ass, I started writing my own code and actually got it working.

But it wasn't as smooth as I liked it to be. So while I was searching for away to make it smoother I ran across Headroom.js and what a treat it was.

So what is Headroom.js?

Headroom.js is a lightweight, high-performance JS widget  that allows you to react to the user's scroll. It does all the heavy lifting for you once you get it set up. Basicly what it does is remove and adds classes as the user scrolls up and down the page.

How do I set it up?

There are some instructions on the headroom.js webpage if you would like to know more about the different ways you can setup headroom.js in your projects.

But to make easier on you have hosted the needed files to help get you up and running quickly.

Step 1).  Copy and paste these two links in your advanced area ( pagelines >settings > advanced)

<script type='text/javascript' 
src='https://8ad9530065ba68185eea3a8b328d1e9c278ad21a.googledrive.com/
host/0B1ZjzU15tGGbUXdJRjZlS0VfbEU/headroom.js'></script>
<script type='text/javascript' 
src='https://8ad9530065ba68185eea3a8b328d1e9c278ad21a.googledrive.com/
host/0B1ZjzU15tGGbUXdJRjZlS0VfbEU/jQuery.headroom.js'></script>

Step 2). Next add this bit of js below the two linked js libraries you just added.

<script>
jQuery('document').ready(function($){

//choose the element to target in this case it is the header
$("header").headroom({
offset : 25,
tolerance: {
down : 10,
up : 20
},
});

});
</script>

If you have done everything correctly your advanced area should look like this.

Step 3). So in order for the Headroom.js to remove and add classes you must first include the classes and declarations in your style sheet. Add the following CSS to your LESS editor.

.headroom {
position: fixed;
top: 0;
left: 0;
right: 0;
transition: all .2s ease-in-out;
}

/*adjust this if you have a big header or parts

of your header are still visible after the hide*/
.headroom--unpinned {
top: -100px;
}
.headroom--pinned {top: 0;}

header {
z-index: 1000;
}

Sorry I don't have a demo ready to show you but I did grab a quick video to see it in action.

IMPORTANT:  I attempted this with the framework theme and Platform 5.

Alright guys I hope you enjoyed this tutorial as always be sure to share and  Like Us On Facebook .

~Aires

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match