Hide/reveal header on scroll (works but a bit jumpy)

[grimski]

Hi there,

I’m working on a website where I have a header that disappears when the user scrolls down (as it normally would). When the user scrolls up the navigation will display itself – and be hidden again once the user begins scrolling down again.

I have an almost working example, it just needs a bit refining – I hope! Here’s the example:

http://codepen.io/moy/pen/MJoddE

The main issue I have with is if you scroll down quickly, when the header first disappears you can see it jump. It would be great if someone could help me resolve this. This also happens if you’re halfway down a page and hit refresh/reload the page.

In additional to that, once the header is reveals after scrolling up it will stay there until you hit the top of the page. As the header increases in size at the top of the page the header animates to how it was before What do people think of this? I was thinking it might be nice if it was ‘seamless’ and you almost didn’t realise it resize as it got to the top of the page – if you get me?

Lastly, more of a CSS problem I think. Once you click the toggle to reveal the navigation you can see it’s cropped by the header. This shouldn’t happen. I can resolve it by moving the navigation outside the header but it would be great if it could remain in there. It looks like the issue is to do with the translateY values that are set and it seems like to affects the children of the header.

Hope that’s enough info and someone can help. Any questions fire away :)

[grimski]

As an update to this, it looks like the “jump” caused if you scroll down too quickly is caused by the opacity value. In addition to the invisible and detached classes being added by the javascript in quick succession.

.invisible has a value of opacity: 0; and .detached a value of opacity: 1;. My guess if that the navigation hasn’t moved itself fully off screen before the opacity is adjusted, making the element visible again?

Any ideas?

[Shikkediel]

Edit – if you remove the opacity altogether, the issue remains in a slightly different manner. So it seems to be related more to the translateY resetting…

codepen.io/anon/pen/zNdPra

Pen doesn’t show anything additionally really, just thought I’d post it after having done some optimisation.

[grimski]

Yeah I’ve had a lot of trouble with that. It’s what seems to cause the navigation on displaying full screen after you’ve scrolled up and down. I suppose these are the draw backs of animating stuff like this with CSS! :/

[Shikkediel]

Yep, it’s definitely the fact that one scrolls beyond the point of switching to fixed position before the transition has ended that’s the cause of the jumpy behaviour. Have a look at the pen though, I seem to have mostly solved it by checking the translateY value to see it is still in progress or not.

Snippet removed, since it’s a work in progress

[Shikkediel]

Messing around trying to get the conditions right. Doesn’t look very optimal yet but I think the issue is gone at least.

[grimski]

Nice one @Shikkediel, yeah that’s looking much better.

I did notice on my example that if you scrolled down at a slow speed, less than the hideShowOffset, once the header left the screen it could appear again even if you were scrolling and it looked a little odd. However, that’s not surprising given how it’s supposed to work. Also it looks like it’s disappeared in your example – not sure if it’s something you noticed too?

What’s your opinion on the logo/nav toggle dropping down at the end? I think I quite like it. It just looks a little odd if you leave the bar a few pixels from the top as they’re not centred, but again I don’t think this is a big issue and it probably looks fine. I’m just looking at it a bit too much maybe!

[Shikkediel]

Gotta say I’ve been mostly focusing on the jumpy behaviour, not so much the other issues you describe. Hadn’t noticed the reappearance bug either…

I’ll have another look for possibly some more suggestions. To be honest, I think I’d like it better if the nav links would stay centered when it enlarges. It’s a nice effect overall but indeed feels somewhat unnatural when scrolling the last few pixels.

[grimski]

Before the code above, I used something called headroom.js (http://wicky.nillia.ms/headroom.js).

That actually handled the scroll back to the top very well and was a lot smoother but I had problems with the header leaving the page as it does in the CodePen. The issue with that was due to the changing of position from absolute to fixed and back again.

[Shikkediel]

That works smoothly, yes. But actually a bit inconsistent when scrolling up again. I altogether like the effect of your solution better. With which I’ve been fiddling around to make the transitions at the top more fluid, but so far to no avail I have to say.

[grimski]

Yeah, I think that’s down to the fact the navigation shrinks. It makes it difficult to control the position of the logo/nav toggle. I think the only way it could be done is maybe adding an additional class that is added/removed at a certain offset value (200px for example), that would increase the size of the header before it hit the top of the browser. But that mightn’t look as good.

[grimski]

One thing I’ve just noticed with this is if you scroll down and up again quickly the ‘minified’ header is displayed even when you’re at the top of the page. Does that happen for anyone else too:

Example: http://codepen.io/nashcheez/pen/KWKjjq

Like if you scroll 100/200px and back up sharply you get the detached class nav (red background).

Any ideas how to prevent this anyone?

[Shikkediel]

I think the scroll position would need to be updated inside the event listener for this (and not refer to currentScroll because that’s likely not where it’s currently at):

header.addClass('transitioning').one('transitionend', function() {
  console.log('transitionend');
  header.removeClass('transitioning');
  if ($(this).scrollTop() > detachPoint) header.addClass('detached');
});

[grimski]

Is that in reference to this bit in the script, do I just replace it?

if (currentScroll > detachPoint) {
        var value = parseInt(header.css('transform').split(',')[5]);
        console.log(value);
        if (!header.hasClass('transitioning') && !header.hasClass('detached') && value != -110) {
          header.addClass('transitioning').one('transitionend', function() {
            console.log('transitionend');
            header.removeClass('transitioning');
            if (currentScroll > detachPoint) header.addClass('detached');
          });
        } else if (!header.hasClass('transitioning') && !header.hasClass('detached')) {
          header.addClass('detached');
        }
      }

[Shikkediel]

Indeed, but all that would be needed is to replace that single currentScroll inside the most deeply nested if statement with $(this).scrollTop(). I thought I’d add the rest of it just as a bit of context.

[Author]

Posts