Pegs. Differential scrolling.

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

‹ Back to scroller demo

Navigation.

Sample Item 1
Sample Item 2
Sample Item 3
Sample Item 4
Sample Item 5
Sample Item 6
Sample Item 7
Sample Item 8
Sample Item 9
Sample Item 10
Sample Item 11
Sample Item 12
Sample Item 13
Sample Item 14
Sample Item 15
Sample Item 16
Sample Item 17
Sample Item 18
Sample Item 19
Sample Item 20
Sample Item 21
Sample Item 22
Sample Item 23
Sample Item 24
Sample Item 25
Sample Item 26
Sample Item 27
Sample Item 28
Sample Item 29
Sample Item 30
Sample Item 31
Sample Item 32
Sample Item 33
Sample Item 34
Sample Item 35
Sample Item 36
Sample Item 37
Sample Item 38
Sample Item 39
Sample Item 40
Sample Item 41
Sample Item 42
Sample Item 43
Sample Item 44
Sample Item 45
Sample Item 46
Sample Item 47
Sample Item 48
Sample Item 49
Sample Item 50
Sample Item 51
Sample Item 52
Sample Item 53
Sample Item 54
Sample Item 55
Sample Item 56
Sample Item 57
Sample Item 58
Sample Item 59
Sample Item 60
Sample Item 61
Sample Item 62
Sample Item 63
Sample Item 64
Sample Item 65
Sample Item 66
Sample Item 67
Sample Item 68
Sample Item 69
Sample Item 70
Sample Item 71
Sample Item 72
Sample Item 73
Sample Item 74
Sample Item 75
Sample Item 76
Sample Item 77
Sample Item 78
Sample Item 79
Sample Item 80

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.