SoftTimur SoftTimur - 3 months ago 18
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

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 */
  background:transparent;
  border-color:transparent;
}

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

Demo http://bootply.com/uldEaDBZOj

Comments