PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

参照: iPhone-like Sliding Headers

Header 1

Dapibus, ultricies, tristique elementum velit eros mauris pellentesque turpis lundium a etiam lundium auctor. Placerat tempor vel et? Augue nisi, integer pellentesque adipiscing proin magnis sed magna turpis proin phasellus, adipiscing in pid ut. Placerat, turpis, cursus tincidunt et hac ridiculus proin magna velit scelerisque, scelerisque hac placerat aliquam? Ac, mus ac in magna duis dapibus, ultricies? Diam? Penatibus tincidunt auctor pulvinar natoque, cursus sed sed! Etiam sit etiam, diam, elit pulvinar nunc velit porttitor vel elementum nisi vel cras pulvinar tincidunt augue massa mus est ut eros. Amet eros amet, vel, a cum augue lectus, velit augue pellentesque egestas, sagittis cum turpis arcu habitasse nec turpis massa aliquam penatibus, dapibus non magnis ac, magna sed natoque pid in risus.

Header 2

Integer lorem lorem. Vel risus, ut mauris, nunc est! Pulvinar, dapibus? Etiam augue eros massa pellentesque et sed porttitor tristique pulvinar magna, dignissim sit etiam ac nunc nascetur augue, amet egestas amet platea augue parturient augue a risus placerat, nec amet? Integer pid ultricies lectus risus tortor, pulvinar est. Purus, egestas tortor? Velit, mauris duis hac ac ut enim, pid ultrices integer ac vel cum? Turpis! Porttitor, ac magna vel proin montes natoque vel turpis phasellus integer elementum aliquet diam pulvinar. In duis? Ac! In rhoncus, porta, pulvinar aliquam tempor cum. Magna, odio risus pellentesque auctor amet porttitor porta eu, vel, porta sed eros etiam natoque? Dignissim odio platea integer duis? Vel mid egestas ultricies, ridiculus dis nisi lorem.

Header 3

Aliquet purus auctor etiam tristique montes, pulvinar turpis dignissim lundium lorem? Habitasse quis ac? Est. Odio auctor auctor cursus integer scelerisque, et amet? Placerat pulvinar vel sociis magnis in odio porttitor purus sed cras, penatibus rhoncus vel nascetur arcu, parturient lorem! Eu aliquet et augue integer magna! Habitasse eros nec platea velit ac eu risus, turpis porttitor porta habitasse, porta. Massa! Enim urna quis elit? Elementum rhoncus, enim nisi, sed, ac, dapibus ut pulvinar! Etiam adipiscing eu et lundium augue pellentesque. Ut mauris rhoncus velit nec vel! Dolor dolor porta mauris diam purus diam sit nec porttitor? In pid ac et, dapibus sagittis enim elementum porta lundium lectus enim in, hac? Augue ridiculus quis lundium habitasse. Integer egestas platea.

Header 4

Porta dolor, sed sit, nisi, proin augue in, rhoncus ultricies ultricies, et a amet lorem, lorem elit arcu non, porta cras tincidunt duis, mauris elementum aliquam lectus a a magnis urna est vel porta dapibus scelerisque porta diam urna! Purus magna. Etiam! Augue! Adipiscing quis mid mus urna mid porta aenean amet aenean sociis proin. Scelerisque montes massa egestas! Vel lundium ac, risus, augue dis magna? A, ut! Dignissim porta purus nascetur porttitor dictumst porta cras porta! Ultricies enim, rhoncus phasellus, turpis, pulvinar, pid, turpis amet! Enim pulvinar ac. Ridiculus! Eu dis tortor facilisis nascetur, pellentesque augue natoque diam! Odio porttitor pulvinar mid, turpis. Lundium integer adipiscing! Cum placerat, scelerisque natoque. Integer, ac adipiscing, nisi enim porttitor, et parturient.

Header 5

Nunc nec urna! Aenean nisi. In auctor, cras nisi. Tristique nascetur, tincidunt enim. Et ridiculus ultricies, nunc magna turpis magna etiam eros ridiculus sed cursus! Sit eros! Vut enim turpis in enim et adipiscing amet pid! Turpis risus? Augue. Sed scelerisque ac lorem adipiscing! Ac ridiculus sed aliquam natoque ultricies phasellus rhoncus magna elit tortor, rhoncus? Facilisis egestas porttitor. Purus nec nec phasellus, hac aliquet amet dictumst enim, est tempor dis. Est cum nec risus dapibus pulvinar sed rhoncus. Elementum in aenean montes? Ultrices et ut eu lectus mid proin mattis lundium non sed tincidunt, cum sit sit lectus amet nisi vel, facilisis, massa placerat enim eu? Porttitor in vut eu magnis aenean! Velit enim mid, nisi ac penatibus.

設置サンプルのソース

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta http-equiv="Content-Language" content="ja" />
      <meta http-equiv="Content-Script-Type" content="text/javascript" />
      <meta http-equiv="Content-Style-Type" content="text/css" />
      <meta http-equiv="imagetoolbar" content="no" />
      <title>設置サンプル</title>
      <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
      <!-- JS -->
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript">
         $(function(){
            var $container = $('#box');
            var $headers = $container.find('h2');
            var zIndex = 2;
            var containerTop = $container.offset().top + parseInt($container.css('marginTop')) + parseInt($container.css('borderTopWidth'));
            var $fakeHeader = $headers.filter(':first').clone();

            /* 見出し要素(h2)要素のz-indexを増加させて重ねる */
            $headers.each(function () {
            var $header = $(this), height = $header.outerHeight(), width = $header.outerWidth();
            zIndex += 2;
            $header.css({
               position: 'absolute',
               width: $header.width(),
               zIndex: zIndex
            });
            /* ホワイトスペース作成 */
            var $spacer = $header.after('<div />').next();
            $spacer.css({
               height: height,
               width: width
            });
         });
         /* スクロールイベントをバインドして見出しのテキストを変更する */
         $container.scroll(function () {
         $headers.each(function () {
            var $header = $(this);
            var top = $header.offset().top;
            if (top < containerTop) {
               $fakeHeader.text($header.text());
               $fakeHeader.css('zIndex', parseInt($header.css('zIndex'))+1);
               }
            });
         });
         /* 初期化 */
         $container.wrap('<div class="box" />');
         $fakeHeader.css({ zIndex: 1, position: 'absolute', width: $headers.filter(':first').width() });
         $container.before($fakeHeader.text($headers.filter(':first').text()));
         });
      </script>
      <!-- CSS -->
      <style type="text/css">
         #box {
            overflow:auto;
            position:relative;
         }
         #box p {
            margin:10px;
         }
         .box {
             margin:0;
             width:600px; height:400px;
             position:relative;
             border:2px solid #999;
             background:#fff;
         }
         .box h2 {
            background:#999;
            margin:0; padding:10px;
            opacity:1;
            color:#fff;
         }
         /* JS required styles */
         .box .box {
             border:0;
         }
      </style>
   <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
   <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
      <div id="wrap">
         <h1>設置サンプル</h1>
         <p>参照: <a href='http://jqueryfordesigners.com/iphone-like-sliding-headers/'>iPhone-like Sliding Headers</a></p>
<!-- CODE -->
         <div class="box" id="box">
            <h2>Header 1</h2>
            <p>Dapibus, ultricies, tristique elementum velit eros mauris pellentesque turpis lundium a etiam lundium auctor. Placerat tempor vel et? Augue nisi, integer pellentesque adipiscing proin magnis sed magna turpis proin phasellus, adipiscing in pid ut. Placerat, turpis, cursus tincidunt et hac ridiculus proin magna velit scelerisque, scelerisque hac placerat aliquam? Ac, mus ac in magna duis dapibus, ultricies? Diam? Penatibus tincidunt auctor pulvinar natoque, cursus sed sed! Etiam sit etiam, diam, elit pulvinar nunc velit porttitor vel elementum nisi vel cras pulvinar tincidunt augue massa mus est ut eros. Amet eros amet, vel, a cum augue lectus, velit augue pellentesque egestas, sagittis cum turpis arcu habitasse nec turpis massa aliquam penatibus, dapibus non magnis ac, magna sed natoque pid in risus.</p>
            <h2>Header 2</h2>
            <p>Integer lorem lorem. Vel risus, ut mauris, nunc est! Pulvinar, dapibus? Etiam augue eros massa pellentesque et sed porttitor tristique pulvinar magna, dignissim sit etiam ac nunc nascetur augue, amet egestas amet platea augue parturient augue a risus placerat, nec amet? Integer pid ultricies lectus risus tortor, pulvinar est. Purus, egestas tortor? Velit, mauris duis hac ac ut enim, pid ultrices integer ac vel cum? Turpis! Porttitor, ac magna vel proin montes natoque vel turpis phasellus integer elementum aliquet diam pulvinar. In duis? Ac! In rhoncus, porta, pulvinar aliquam tempor cum. Magna, odio risus pellentesque auctor amet porttitor porta eu, vel, porta sed eros etiam natoque? Dignissim odio platea integer duis? Vel mid egestas ultricies, ridiculus dis nisi lorem.</p>
            <h2>Header 3</h2>
            <p>Aliquet purus auctor etiam tristique montes, pulvinar turpis dignissim lundium lorem? Habitasse quis ac? Est. Odio auctor auctor cursus integer scelerisque, et amet? Placerat pulvinar vel sociis magnis in odio porttitor purus sed cras, penatibus rhoncus vel nascetur arcu, parturient lorem! Eu aliquet et augue integer magna! Habitasse eros nec platea velit ac eu risus, turpis porttitor porta habitasse, porta. Massa! Enim urna quis elit? Elementum rhoncus, enim nisi, sed, ac, dapibus ut pulvinar! Etiam adipiscing eu et lundium augue pellentesque. Ut mauris rhoncus velit nec vel! Dolor dolor porta mauris diam purus diam sit nec porttitor? In pid ac et, dapibus sagittis enim elementum porta lundium lectus enim in, hac? Augue ridiculus quis lundium habitasse. Integer egestas platea.</p>
            <h2>Header 4</h2>
            <p>Porta dolor, sed sit, nisi, proin augue in, rhoncus ultricies ultricies, et a amet lorem, lorem elit arcu non, porta cras tincidunt duis, mauris elementum aliquam lectus a a magnis urna est vel porta dapibus scelerisque porta diam urna! Purus magna. Etiam! Augue! Adipiscing quis mid mus urna mid porta aenean amet aenean sociis proin. Scelerisque montes massa egestas! Vel lundium ac, risus, augue dis magna? A, ut! Dignissim porta purus nascetur porttitor dictumst porta cras porta! Ultricies enim, rhoncus phasellus, turpis, pulvinar, pid, turpis amet! Enim pulvinar ac. Ridiculus! Eu dis tortor facilisis nascetur, pellentesque augue natoque diam! Odio porttitor pulvinar mid, turpis. Lundium integer adipiscing! Cum placerat, scelerisque natoque. Integer, ac adipiscing, nisi enim porttitor, et parturient.</p>
            <h2>Header 5</h2>
            <p>Nunc nec urna! Aenean nisi. In auctor, cras nisi. Tristique nascetur, tincidunt enim. Et ridiculus ultricies, nunc magna turpis magna etiam eros ridiculus sed cursus! Sit eros! Vut enim turpis in enim et adipiscing amet pid! Turpis risus? Augue. Sed scelerisque ac lorem adipiscing! Ac ridiculus sed aliquam natoque ultricies phasellus rhoncus magna elit tortor, rhoncus? Facilisis egestas porttitor. Purus nec nec phasellus, hac aliquet amet dictumst enim, est tempor dis. Est cum nec risus dapibus pulvinar sed rhoncus. Elementum in aenean montes? Ultrices et ut eu lectus mid proin mattis lundium non sed tincidunt, cum sit sit lectus amet nisi vel, facilisis, massa placerat enim eu? Porttitor in vut eu magnis aenean! Velit enim mid, nisi ac penatibus.</p>
         </div>
<!-- / CODE -->
      </div>
   </body>
</html>