SoftTimur SoftTimur - 1 year ago 116
CSS Question

Pop up header when scrolling down

I would like to imitate the header of this page. That means:

1) once the page is loaded, the header is inside the promo picture

2) when scrolling down, the header pops up and changes its color

I have not found out how this is accomplished in its code. Does anyone know the mechanism to realise that?

Answer Source

Use the Bootstrap affix component to change the navbar style when the page is scrolled.

<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="400">

.affix {
  /* fixed navbar style */

.affix-top {
  /* navbar style at top */

Set the data-offset-top attribute to the pixel height you want the navbar to transition.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download