HTML scrolling effects

I'm noticing a lot of sites are recently implementing new types of scrolling effects. Here's one example:

https://banksimple.com/

When you first start scrolling the initial section stays in place (z-index of 1?) while cont开发者_JAVA百科ent scrolls over top of it. It also uses fragments and dynamically highlights it's navbar depending on what area the user has scrolled to.

I've seen a few sites use similar techniques. One (which I cannot find the link to) changes the background dynamically.

Is there a common technique used for these types of sites?

The first two sections are using position:fixed.

This fixes the items to a position on the page. They don't move, even with scrolling.

The scrolling section uses position:absolute with a high z-index.

This scrolls fine and because it has a higher z-index than the fixed position elements, it scrolls over them.

There's several ways to do this, but the easiest is to simply make a div, and use the CSS

"position:fixed;" 

property. This will cause the div to stick exactly where it is, relative to the browser window.

You may also want to set you z-index to a large value so that the div is certain to stay on top of the rest of the page.

For the menu and header, it's a simple CSS solution using position: fixed and z-index. Both menu and header has position: fixed, while the menu has a large z-index value and the main content has a slightly lower one:

#menu { position: fixed; top: 0; left: 0; z-index: 2000; }
#header { position: fixed; top: ??; left: 0; }
#wrapper { z-index: 10; }

As for the fragment thing, it's done using JS. W3Fools has the same thing, done using jQuery. Perhaps you can decipher the script. Looks like it hooks to the scroll event of the document, checking if the position if the element is above the position of the viewport, taking action accordingly.

One way is to combine CSS + JavaScript let's say (jQuery)

CSS:

position:fixed for the top panel.

Use jQuery offset to detect container position and after you can can apply CSS classes for the "highlights navbar".