Jump to content

Shrinking Navbar/Header on Page scroll - UIKit How?


Gazley
 Share

Recommended Posts

Hi there,

You've probably seen the effect when a page loads with a header/navbar at a certain height, say 88px, and when the user scrolls down the page a little, the header/navbar animates a reduction in height to say 44px, often with a change of content or logo size.

Do any UIKit users know how to achieve this in UIKit? I'm just playing around with UIKit for the first time.

Any help/advice, very much appreciated! :)

Thanks!

Link to comment
Share on other sites

You could use the parallax or maybe the sticky component. I usually solve this by checking scroll amount with jQuery and if that exceeds a given amount (px) I add a class to the nav (or the body), and apply new CSS styles to the nav.

  • Like 1
Link to comment
Share on other sites

Hi @tpr,

Thanks for the heads-up. The way you do it (jQuery/scroll) is the way I've done it in the past. I just didn't want to miss out on something that UIKit may have offered "out of the box". I checked the docs but saw nothing and, now I know why! :)

Cheers!

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...