[Solved] Twitter profile mobile navbar style (Late 2015)

[NoobSimon]

The other day I noticed the Twitter app for Android had a very cool style, here it is in action:
http://i.imgur.com/j4SYPUM.gifv

It does two things I would like to emulate for the desktop in CSS/JS
1. They take the hero image and use it as the background for the navbar
2. They affix the navbar from from the top of the page after end of the hero goes out of the view port.

I have no clue how to tackle this issue. But I have the groundwork here, it think. Any ideas how to complete the effect?
http://codepen.io/aggressivedigital/pen/qOGaJm

[NoobSimon]

Im slightly closer to to end result
http://codepen.io/aggressivedigital/pen/PPrmNy

Any help would be appreciated.

[Shikkediel]

The problem might be that it’s a mobile menu – that won’t respond to scrolling as you would expect. Swiping a page doesn’t fire the event until it is released. If you want it to smoothly work on a touch device, it would have be to be listening to touchmove…

Here’s something I recently tweaked though that looks similar, using the scroll event.

https://jsfiddle.net/3x6dwptL/

[NoobSimon]

Thanks for your help. For the moment I just want to recreate the effect for a desktop browser. The JS is confusing me :S

[Shikkediel]

Desktop shouldn’t be a problem. Unless you use a smooth scroll plugin, the effect will be mostly lost though.

Shouldn’t your header start at a larger size then? If so, how much… I could put something together based on the first pen. That makes most sense to me.

This is the only essential bit by the way :

if (st <= 40) {
newH = menu;
newP = 0;
}
else if (st <= 70) {
newH = menu - st + 40;
newP = st - 40;
}
else {
newH = 60;
newP = 30;
}

Below 40 pixels scrolled and above 70, basically do nothing, keep fixed heights. In between, make the header a pixel smaller with each pixel scrolled. And add just as much padding to the top of the following content so it appears to stand still.

http://stackoverflow.com/q/33770336/3168107

[mhodges44]

In your codepen, you have a traditional sticky navbar, which is what I originally thought to use as well, but after watching that gif about 50 times, I realized that the header is not actually scrolling, it is simply shrinking in size and the background image is snapped to the bottom, so it gives it the appearance of scrolling, but the header is “position: fixed” the entire time. Here is a codepen to demonstrate at least one way to get this to work (and how I think they did it).

http://codepen.io/mhodges44/pen/mVbJVM

Hope this helps!

[NoobSimon]

Thank you for your help @mhodges44

[Author]

Posts