Foundation-sites: [Feature] Scrolling Topbar: Changing Navbar/Topbar size on scroll

Created on 26 Jan 2017 · 8Comments · Source: foundation/foundation-sites

Motivation => https://material.io/guidelines/

Codepen: http://codepen.io/BuiltBySam/pen/merjWp
Full page demo => http://codepen.io/BuiltBySam/full/merjWp/

Yes, it can be done outside foundation as a plugin/building block but then why add a plugin if it can be added with few lines of code and with a simple html markup like

<nav class="scrolling-topbar"> 
  <!-- My Big scrolling navbar ( that will resize to small in size on scroll ) here -->
</nav>

As much i get it, this can be done with a little tweak of padding and font size??

Sticky Top Bar building blocks

Source

IamManchanda

All 8 comments

I think this is available in the framework. please see the Sticky module page, and then scroll to the Sticky Navigation section.

denisahac on 27 Jan 2017

👍1

hmmnnn @denisahac .... Not smooth like above example but seems like yes it is available !

IamManchanda on 27 Jan 2017

This is not one size fits all solution, I think Foundation did a great job in setting-up the base styling and functionality for this feature. You can just refine the styling according to your needs, and that is per project basis.

denisahac on 27 Jan 2017

👍1

Hmmnnn you are right. Though i would still argue can be a bit smoother. Closing this. Thanks for your input!

IamManchanda on 27 Jan 2017

@IamManchanda That would make a nice Building Block! The same thing is represented here: http://foundation.zurb.com/building-blocks/blocks/topbar-sticky-shrink.html

The .is-stuck class generated by the sticky plugin is ideal for changing elements inside when sticky is activated.