• Lee Mason Design

    Hi – this is great for serving up a secondary variation of a header (a second layout) which is just what’s needed. However – one thing that would be a great addition is if the sticky wasn’t visible in any form until you scroll down the page, and disappeared as you scroll back up near the top – as I literally want to serve up 2 different layouts. Or perhaps I’m missing something – perhaps I can just use ‘not-sticky’ and ‘sticky’ as a way of styling the header completely differently for both instances, and perhaps i don’t need separate header code for each version – what would you recommend? Thanks Lee

    • http://imdanishiqbal.com Danish Iqbal

      Hi,

      What i understood is that you want the header to be invisible when page is loaded and only appear when it’s scrolled down to a certain point, We can use .not-sticking { display: none !important; } but that will cause jerk when header becomes visible because it will take it’s place in the document. So to get rid of this use body { padding-top: 0 !important; }

      Hope this helps

      Thanks

      • Lee Mason Design

        Hi thanks for help. I’ve got this working perfectly now to show a different menu layout for the sticky to non-sticky. However – this script doesn’t animate on iPad landscape, instead it displays a static fixed menu, is there to make this still work the same on IPad as it does in a desktop? Thanks

        It may be that there was is another script for what I’m looking for, which is essentially to show a centred logo and nav that is replaced by a horizontal sticky version when 200px down the page. I’ve managed to set your sticky to appear/disappear at the 200px point and show alternate layouts perfectly. The only issue is that on iPad it shows both menu and sticky on top of each other – the clone is not animating like it it does on the desktop, it’s doing the same on this demo but as both of your menus are identical it isn’t visible that there is one static menu on top of another.

        Thanks,

        Lee

        • http://imdanishiqbal.com Danish Iqbal

          Hi Lee,

          There is no clone on this demo. This plugin is only for making sticky header, if you want to use two headers then you can use CSS media queries to hide the one that you don’t want to show on iPad.

          I hope i understood what you meant.

          Thanks

          Danish Iqbal

        • http://imdanishiqbal.com Danish Iqbal

          Hi Lee,

          Can you give me the link to demo or something, there is no clone on this demo it’s just one header.

          Thanks

          Danish Iqbal

          • Lee Mason Design

            Hi Danish, sorry you are quite right – I completely confused myself!!

            I currently have 2 instances of ‘header’ loading in my theme to achieve a certain effect, seen here; http://www.lmd-3.co.uk/

            Your scipt is indeed one header, no clone, but to create my effect I have (so far) had to create a duplicate of the menu to load 2 completely different headers. You may not be able to help with this, however – if you do have any advice on perhaps how your script could achieve 2 different layouts, so that my duplicating menus is not needed – I would greatly appreciate it (as I’m sure I read duplicating menus is bad for SEO).

            You will see what I mean from the link I think.

            Thanks,

            Lee

          • http://imdanishiqbal.com Danish Iqbal

            Hi Lee,

            I inspected that you are using .clone to set float property of .navbar-header and .navbar-collapse. You can use just one header and add .clone class to .header when page is scrolled down by 200 px and remove this class when it’s scrolled back less than 200 px and re-size logo based on that as well. You might be able to make use of events provided by the plugin. I think this approach will cause some kind of jerk as elements change their positions.

            Try this and let’s see if it works.

            Thanks,

            Danish

  • Pixi Buex

    A question. The header becomes sticky at “topOffset” value, but becomes unsticky when we scroll to absolute top. Could we assign a position for when it becomes unsticky as well?
    For example when we reach 300px while scrolling to top, the header will become unsticky.
    Because the height of our sticky header is smaller than the normal header, and the transition between those two doesn’t look good when we scroll to the top. Hope this makes sense.

    • Andrew Misplon

      Hi Pixi

      Were you able to find an solution? I have the same situation. Thanks.

  • Dale Hird

    Hi I am attempting to use your code and I get an Uncaught type error …. stickme is not a function.

  • Oussama Bouyardane

    Hi, the file Sticky-header.js is not completed, is not have the same code like your demo file :
    http://plugins.imdanishiqbal.com/sticky-header/wp-content/themes/jquery-sticky-header/js/sticky-header.js?ver=20130115
    So fix this issue, because many people can face ‘Uncaught type error, stickMe is not a function’ !!

  • Yuriy

    Hi Danysh, I want to use fixed header from breakpoints 1024px, how can I do it?

    • http://imdanishiqbal.com Danish Iqbal

      $(‘.header-class’).stickMe(function(){
      topOffset: 1024
      });