Pegs. Differential scrolling.

One scrollbar. Several scrollable areas. Independent (and hopefully sensible) distribution of movement.

‹ Back to scroller demo

Content area.

An experiment in keeping information on the page.
Columns are "pegged" in order to keep their content on screen while scrolling.

Pros:

  • Having site navigation remain on-screen may increase the chance that people will visit interior pages.
  • Ads in columns remain on-screen longer which could increase visibility.
Cons:
  • More interface logic to maintain.
  • Scroll behavior may be confusing.
  • May be difficult to make the behavior smooth and polished.

About this: No frames. Scrolling is managed via Javascript. Uses JQuery as a base. Design should work like as a normal page if the javascript is removed. This is just proof-of-concept and is not recommended for use in production yet.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.

Morbi convallis, lacus eget porta dapibus, magna neque ultrices orci, nec rutrum magna sem vitae dolor. Mauris suscipit lorem varius justo. Nunc nec mi in lorem imperdiet volutpat. Quisque dignissim, tortor non pharetra pharetra, erat erat varius lorem, sed mattis ipsum massa vel odio. Integer facilisis. Fusce sollicitudin iaculis enim. Nulla felis pede, imperdiet eget, eleifend non, vehicula interdum, nibh. Aenean orci risus, venenatis a, dignissim a, facilisis sit amet, sem. Suspendisse eleifend orci vitae lectus dapibus vestibulum. Nunc metus. Maecenas molestie suscipit mauris. Etiam suscipit malesuada elit. Duis erat nibh, feugiat ac, pulvinar vitae, ornare in, magna.