Forums

Any Themes (or Add-Ons) With A Fixed/Floating Header Effect

Permalink
There is a great example of what we're looking for here:

http://www.jetcooper.com

As you start scrolling down a few things happen:

1. The header starts to collapse.

2. Eventually a smaller collapsed header floats fixed at the top.

3. There are some cool animations along the way.

The most important thing to us is #2 - a fixed header - but the rest would be great too.

Does anyone know of anything that would do that? Or think they might be capable of creating it? Please let me know.

Thank you.
msanderson
 
paulharbison replied on at Permalink Reply
Hi there,

I know this reply is kinda late but it may help (in part) someone like me who was looking for the same effect.

Try this:http://stickyjs.com/

It's easy to add
msanderson replied on at Permalink Reply
msanderson

Thank you very much! Better late than never.
garyjhills replied on at Permalink Reply
garyjhills
HI guys,

Just saw this and I need something like this for one of my sites. You said it's easy to add but could you provide a little more details? I'm not overly sure on how to apply it to my header area that needs to be sticky.

Thanks,

Gary
ronyDdeveloper replied on at Permalink Reply
ronyDdeveloper
Have a look at http://vencorp.venmond.com/index-one-page-parallax.php...
paulharbison replied on at Permalink Reply
Hi Gary,

Have you downloaded the plugin zipped folder from the link provided and looked at the examples inside.

1. You need to upload the file jquery.sticky.js into your current theme folder.

2. You need to include the following within the <head> tags in your header file 
<script type="text/javascript" src="<?=$this->getThemePath()?>/jquery.sticky.js"></script>


3. Following the above code you need to include the following within the <head> tags in your header file 
<script>
    $(window).load(function(){
      $("#header").sticky({ topSpacing: 0 });
    });
  </script>


4. You need to wrap the header area you wish to apply the effect to within a Div with an id="header".

I think that should do it, if I remember correctly.

Paul