Special effects of background scrolling implemented by fixed backgrounds

The online demonstration shares a fixed background rolling effect from corpse. The page will scroll smoothly using the background-attachment: fixed and navigation menu. HTML <divid>

Online Demo

Share a fixed background rolling effect from corpse. Use the background-attachment: fixed and navigation menu to scroll the page smoothly.

HTML

Section 1
Section 2
Section 3
Section 4
Section 5







CSS

/* Set all parents to full height */
Html, body,
. Container,
. White-fbscroller,
. Cbp-fbscroller section {
Height: 100%;
}
 
/* The nav is fixed on the right side and we center it by translating it 50%
(We don't know it's height so we can't use the negative margin trick )*/
. Cbp-fbscroller> nav {
........