Home › Forums › JavaScript › Hide/reveal header on scroll (works but a bit jumpy)
- This topic is empty.
-
AuthorPosts
-
January 24, 2017 at 8:25 am #250388
grimski
ParticipantHi 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 :)
January 25, 2017 at 2:41 am #250445grimski
ParticipantAs 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 theinvisible
anddetached
classes being added by the javascript in quick succession..invisible
has a value ofopacity: 0;
and.detached
a value ofopacity: 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?
January 25, 2017 at 4:30 am #250449Shikkediel
ParticipantEdit – 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…Pen doesn’t show anything additionally really, just thought I’d post it after having done some optimisation.
January 26, 2017 at 2:40 am #250537grimski
ParticipantYeah 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! :/
January 26, 2017 at 2:50 am #250538Shikkediel
ParticipantYep, 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
January 26, 2017 at 2:56 am #250539Shikkediel
ParticipantMessing around trying to get the conditions right. Doesn’t look very optimal yet but I think the issue is gone at least.
January 26, 2017 at 6:06 am #250543grimski
ParticipantNice 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!
January 26, 2017 at 6:43 am #250544Shikkediel
ParticipantGotta 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.
January 26, 2017 at 8:30 am #250552grimski
ParticipantBefore 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.January 28, 2017 at 3:44 am #250620Shikkediel
ParticipantThat 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.
January 30, 2017 at 5:09 am #250704grimski
ParticipantYeah, 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.
February 24, 2017 at 9:43 am #251890grimski
ParticipantOne 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?
February 24, 2017 at 10:31 am #251895Shikkediel
ParticipantI 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'); });
February 26, 2017 at 3:44 am #251969grimski
ParticipantIs 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'); } }
February 26, 2017 at 4:19 am #251970Shikkediel
ParticipantIndeed, but all that would be needed is to replace that single
currentScroll
inside the most deeply nestedif
statement with$(this).scrollTop()
. I thought I’d add the rest of it just as a bit of context. -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.