New - Pastie

Language:

## mark a section (Learn more)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>scripty2 test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="prototype.s2.min.js"></script> <style type="text/css"> </style> <style type="text/css" media="screen"> html, body {margin:0} #wrapper {margin:0; padding:0; list-style:none;} #wrapper li {display:block; margin:0; padding:5px; border-bottom:1px solid #fff; background:gray;} #wrapper li.fixed {position:fixed; top:0; width:100%;} #wrapper li h1 {margin:0; padding:0;} </style> </head> <body> <ul id="wrapper"></ul> <script type="text/javascript"> var alphabet = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'], list = $('wrapper'), li, offset = 0; alphabet.each(function(x){ list.insert(new Element('li', {id:x, name:x, className:'title'}).insert('<h1>' + x + '</h1>')); list.insert('<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li>'); }); li = $$('li.title'); Event.observe(window, 'scroll', function(event){ li.each(function(x){ if(x.viewportOffset().top < 0 || x.next().viewportOffset().top < 0) { x.addClassName('fixed'); } else { x.removeClassName('fixed'); } }); delta = 0; }); </script> </body> </html>