JavaScript + Ajax 実践サンプル集 - jQueryのAPIで広告枠を固定して常時表示する(Stay put)

jQueryのAPIで広告枠を固定して常時表示する(Stay put)

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのcss()apiを利用して広告情報を固定して常時表示します。広告枠が画面上端に到達するまでは通常通りスクロールしますが、画面上端に到達すると固定されて常時表示されます。つまり、常に固定されているのではなく画面の上端に到達したときのみ固定されます。

このサンプルを編集して試してみる

このサンプルは、div要素のスタイルを書き換えることにより広告枠を固定しています。広告枠が上端に到達するまでにスタイルに「position:static」を設定して通常通りスクロールさせます。上端に到達したら「position:fixed」を設定して固定させます。IE6以下のときは「position:absolute」を設定して固定しています。

startPos = $("#semiFixed").position().top;
divHeight = $("#semiFixed").outerHeight();
if ($.browser.safari) {
  divHeight += 20;
}
$("#placeHolder").css("height", divHeight + "px")

$(window).scroll(function(e) {
  scrTop = $(window).scrollTop();

  if ((startPos - 5) < scrTop) {
    if ($.browser.msie && $.browser.version <= 6) {
      topPos = startPos + (scrTop - startPos) + 5;
      $("#semiFixed").css("position", "absolute")
	  .css("top", topPos + "px")
	  .css('zIndex', '500');
    }
    else {
      $("#semiFixed").css("position", "fixed")
	  .css("top", "5px")
	  .css("zIndex", "500");
    }
  }
  else {
    $("#semiFixed").css("position", "static");
  }

});

<!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">
<head>
  <title>jQuery Stay Put!</title>
  <link href="jQuery/stayPut/stayPut.css" rel="stylesheet" type="text/css" />
  <script src="jQuery/jquery-1.3.2.js" type="text/javascript"></script>
  <script src="jQuery/stayPut/stayPut.js" type="text/javascript"></script>
</head>
<body>
<div id="content">

<div>
    <p>
      Lorem ipsum eius ipsum sed ut, mei id mazim verear. Quas eripuit his eu, omnium
      volutpat ullamcorper vix id. Mei an labores periculis, sea eius possim mediocrem
      ea. Nam graece populo pertinacia ea, ius nostro prodesset disputationi ex, veri
      nobis vivendo id has. Ei vim congue petentium appellantur, nibh tempor eruditi vix
      ei, nam ei munere mandamus.
    </p>
  </div>

<div id="placeHolder">
    <div id="semiFixed">
      <h1 id="header">バーゲンセール！</h1>
      <div id="containerBody">
        <h2>常時表示される広告！</h2>
          <p>
            ここに表示される情報はページをスクロールしても固定されて常時表示されます。
            広告、重要な連絡事項などを掲載するときに利用すると便利です。
          </p>
          <img src="jQuery/stayPut/buynow.gif" alt="Buy now!" title="Buy Now!" />
          <h2>DELL NOTE PC!</h2>
          <p>限定１０名</p>
          <h2>特別価格 68,980円</h2>
          <p>©2009 jsajax.com</p>
      </div>
    </div>
  </div>

<div id="loremipsum">
    <p>
      Lorem ipsum eius ipsum sed ut, mei id mazim verear. Quas eripuit his eu, omnium
      volutpat ullamcorper vix id. Mei an labores periculis, sea eius possim mediocrem
      ea. Nam graece populo pertinacia ea, ius nostro prodesset disputationi ex, veri
      nobis vivendo id has. Ei vim congue petentium appellantur, nibh tempor eruditi vix
      ei, nam ei munere mandamus.
    </p>
    <p>
      Aliquid repudiare eum et, libris nemore pri no. Prima nihil adversarium eam an,
      modus partem liberavisse his cu. Et sit tempor lucilius, sea in nonumy legendos
      temporibus. Sale liber philosophia ea pri, quo ridens commodo theophrastus id. Ex
      his nonummy rationibus deterruisset. Ne appetere luptatum mei, his omnes omnesque
      mnesarchum an, esse ignota vel ex.
    </p>
    <p>
      Meliore partiendo hendrerit quo ad, qui eu eripuit atomorum adipiscing, an alii
      propriae deserunt qui. Ex nec elit rebum fierent. At sed viderer iracundia mediocritatem,
      id ancillae mediocrem nec. Nam ancillae epicurei repudiare te, sonet graeci argumentum
      duo eu, deleniti gubergren ei vim. Vim vidit fugit dissentiunt no, ne has iudicabit
      temporibus, errem causae discere mea ad. Cum ne vide intellegam inciderint.
    </p>
    <p>
      Modus debet aeque an mei, vim prima mucius repudiandae ex, tale altera tamquam eos
      ut. His tollit dolorem aliquyam ad, pro no noster quodsi nominavi. Graecis eloquentiam
      vis et, eam ne nostrum hendrerit. Adhuc meliore necessitatibus est te, te nusquam
      vivendum sapientem pri, an vim causae vulputate. Nam ad utinam fuisset delicatissimi,
      eu puto causae eligendi est, ea nam vocent delicata. Veniam vivendum voluptatum
      ei nam, et mel iisque percipit abhorreant. Vim ad dolor saepe, ne ius ornatus dolores.
    </p>
  </div>
</div>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/* ================================================================ 
This copyright notice must be untouched at all times.
Stay Put!
Copyright (c) 2009 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */

$(function() {

  startPos = $("#semiFixed").position().top;
  divHeight = $("#semiFixed").outerHeight();
  if ($.browser.safari) {
    divHeight += 20;
  }  
  $("#placeHolder").css("height", divHeight + "px")

  $(window).scroll(function(e) {
    scrTop = $(window).scrollTop();

    if ((startPos - 5) < scrTop) {
      if ($.browser.msie && $.browser.version <= 6) {
        topPos = startPos + (scrTop - startPos) + 5;
        $("#semiFixed").css("position", "absolute")
	.css("top", topPos + "px")
	.css('zIndex', '500')
      }
      else {
        $("#semiFixed").css("position", "fixed")
	.css("top", "5px")
	.css("zIndex", "500")
      }
    }
    else {
      $("#semiFixed").css("position", "static")
    }

  });

});

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
#header
{
  height: 120px;
  background: #aaa;
  padding: 10px;
}
#leftCol
{
  width: 580px;
  height: 1500px;
  float: left;
  background: #ddd;
  padding: 10px;
}
#rightCol
{
  width: 250px;
  float: right;
  height: 1500px;
  padding: 10px;
}
#semiFixed
{
  width: 170px;
}
#header
{
  height: 27px;
  background: url(top.gif);
  margin: 0;
  padding: 0 0 0 10px;
  color: #fff;
  font-size: 12px;
  line-height: 25px;
  font-family: arial, sans-serif;
}
#containerBody
{
  background: url(bottom.gif) left bottom;
  padding: 10px;
  color: #666;
  font-family: arial, sans-serif;
}
#containerBody p
{
  font-size: 11px;
  line-height: 1.5em;
  padding: 0;
  margin: 5px 0;
}
#containerBody h2
{
  font-size: 14px;
  color: #000;
  padding: 3px 0 0 0;
  margin: 0;
}
#containerBody img
{
  display: block;
  float: left;
  padding: 10px 10px 10px 0;
}
.clear
{
  clear: left;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/stayPut/stayPut.css" rel="stylesheet" type="text/css" />
<script src="jQuery/jquery-1.3.2.js" type="text/javascript"></script>
<script src="jQuery/stayPut/stayPut.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div id="content">

  <div id="information">
    <h3>今日のお買い得情報！</h3>
  </div>

  <div id="placeHolder">
    <div id="semiFixed">
      <h1 id="header">バーゲンセール！</h1>
      <div id="containerBody">
        <h2>常時表示される広告！</h2>
          <p>
            ここに表示される情報はページをスクロールしても固定されて常時表示されます。
            広告、重要な連絡事項などを掲載するときに利用すると便利です。
          </p>
          <img src="jQuery/stayPut/buynow.gif" alt="Buy now!" title="Buy Now!" />
          <h2>DELL NOTE PC!</h2>
          <p>限定１０名</p>
          <h2>特別価格 68,980円</h2>
          <p>©2009 jsajax.com</p>
      </div>
    </div>
  </div>

  <div id="loremipsum">
    <p>
      Lorem ipsum eius ipsum sed ut, mei id mazim verear. Quas eripuit his eu, omnium
      volutpat ullamcorper vix id. Mei an labores periculis, sea eius possim mediocrem
      ea. Nam graece populo pertinacia ea, ius nostro prodesset disputationi ex, veri
      nobis vivendo id has. Ei vim congue petentium appellantur, nibh tempor eruditi vix
      ei, nam ei munere mandamus.
    </p>
    <p>
      Aliquid repudiare eum et, libris nemore pri no. Prima nihil adversarium eam an,
      modus partem liberavisse his cu. Et sit tempor lucilius, sea in nonumy legendos
      temporibus. Sale liber philosophia ea pri, quo ridens commodo theophrastus id. Ex
      his nonummy rationibus deterruisset. Ne appetere luptatum mei, his omnes omnesque
      mnesarchum an, esse ignota vel ex.
    </p>
    <p>
      Meliore partiendo hendrerit quo ad, qui eu eripuit atomorum adipiscing, an alii
      propriae deserunt qui. Ex nec elit rebum fierent. At sed viderer iracundia mediocritatem,
      id ancillae mediocrem nec. Nam ancillae epicurei repudiare te, sonet graeci argumentum
      duo eu, deleniti gubergren ei vim. Vim vidit fugit dissentiunt no, ne has iudicabit
      temporibus, errem causae discere mea ad. Cum ne vide intellegam inciderint.
    </p>
    <p>
      Modus debet aeque an mei, vim prima mucius repudiandae ex, tale altera tamquam eos
      ut. His tollit dolorem aliquyam ad, pro no noster quodsi nominavi. Graecis eloquentiam
      vis et, eam ne nostrum hendrerit. Adhuc meliore necessitatibus est te, te nusquam
      vivendum sapientem pri, an vim causae vulputate. Nam ad utinam fuisset delicatissimi,
      eu puto causae eligendi est, ea nam vocent delicata. Veniam vivendum voluptatum
      ei nam, et mel iisque percipit abhorreant. Vim ad dolor saepe, ne ius ornatus dolores.
    </p>
  </div>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのAPIで広告枠を固定して常時表示する(Stay put)

JavaScript + Ajax 実践サンプル集 (1496本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

jQueryのAPIで広告枠を固定して常時表示する(Stay put)

JavaScript + Ajax 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!