TopJavaScriptjQuery > 2012年9月
2012年9月10日

スクロールしたときにサイドバーのパーツをjQueryで止める方法

September 10,2012 1:55 AM
Tag:[, ]
Permalink

スクロールしたときにサイドバーのパーツを止める方法についてご質問を頂きましたの、で本エントリーで紹介します。

似たような記事を、以前「jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン」で紹介しましたが、サイドバーのパーツを止める場合の説明が不足していたので、改めて本エントリーで解説します。

1.サンプル

追記:サンプル復旧しました。

下にサンプルを用意しました。

サンプル
サンプル

このサンプルは、スクロールしたときに、ページ右下にある「MT5」というMovable Typeのクレジットバナーを止めるようにしています。

クレジットバナー

動作はFirefoxとGoogle Chromeで確認しています。

2.設定方法

1項のサンプルを用いて解説します。

まず、本ブログで配布しているjQueryプラグイン「PersistentHeaders」のv0.0.2をダウンロードして、サーバの任意のディレクトリにアップロードしてください。

jQueryでスクロールした要素をページ上部に固定するPersistentHeadersプラグイン

次に、スクロールしたときに止めたいパーツにclass属性「persist-header」を設定し、パーツをdiv要素で囲み、class属性「persist-area」を設定します。

変更前

<div class="widget-powered widget">
    <div class="widget-content">
        <a href="http://www.sixapart.jp/movabletype/"><img src="mt-static/images/bug-pbmt-white.png" alt="Powered by Movable Type 5.14-ja" width="120" height="75" /></a>
    </div>
</div>

変更後(赤色部分を追加)

<div class="persist-area">
<div class="widget-powered widget persist-header">
    <div class="widget-content">
        <a href="http://www.sixapart.jp/movabletype/"><img src="mt-static/images/bug-pbmt-white.png" alt="Powered by Movable Type 5.14-ja" width="120" height="75" /></a>
    </div>
</div>
</div>

次に、bodyの終了タグの直前などに以下のような内容を設定します。



スクロールでパーツが止まるときに、パーツが上から下にがくっと移動するような挙動になる場合は、次のように「offset」を設定してみてください。追加したあと「isHidden」の行末にカンマを付け忘れないよう、気をつけてください。

jQuery(function() {
    jQuery('body').persistentHeaders({
        isHidden: false,
        offset: 20
   });
});

最後に、次のスタイルを追加すれば完了です。

.floatingHeader {
    position: fixed;
    top: 0;
    visibility: hidden;
}

以上です。

Comments [0] | Trackbacks [0]
2012年9月 5日

jQueryのtext()とhtml()の違い

September 5,2012 1:55 AM
Tag:[]
Permalink

jQueryのtext()とhtml()の違いについて紹介します。jQueryビギナー向けのエントリーです。

1.text()について

text()は指定した要素のテキストノードを返却します。

簡単な例として、次のようなHTMLマークアップがあるとします。

<div class="foo">Demonstration Box</div>

このマークアップに対して

$('.foo').text();

を実行すると、次のような結果を返却します。

Demonstration

また、text()は指定した要素に含まれる子孫要素のテキストノードすべてを結合して返却します。

例えば次のようなHTMLマークアップがあるとします。

<div class="foo">
  <div class="bar">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

このマークアップに対して

$('.foo').text();

を実行すると、次のような結果を返却します。

Demonstration Box list item 1 list item 2

2.html()について

html()は指定した要素のHTMLを返却します(指定した要素は含みません)。

例えば次のようなHTMLマークアップがあるとします。

<div class="foo">
  <div class="bar">Demonstration Box</div>
  <ul>
    <li>list item 1</li>
    <li>list <strong>item</strong> 2</li>
  </ul>
</div>

このマークアップに対して

$('.foo').html();

を実行すると次のような結果を返却します。

<div class="bar">Demonstration Box</div>
<ul>
  <li>list item 1</li>
  <li>list <strong>item</strong> 2</li>
</ul>

指定した要素がテキストノードのみであれば、html()とtext()の実行結果は(多分)同じですが、指定した要素にHTMLが含まれる場合、HTMLを返却するというところが、text()との大きな違いです。

3.text(str)について

text(str)は、指定した要素に、パラメータで指定した内容をテキストノードとして設定します。

例えば次のように設定します。

$('.foo').text('bar');

実行して、class属性値「foo」の要素が存在すれば、次のようになります。

<div class="foo">bar</div>

また、パラメータにHTMLを記述すると「<」「>」が実体参照されます。つまりHTMLとして扱われません。

例えば次のように設定します。

$('.foo').text('<p>bar</p>');

実行すると次のようになります。

<div class="foo">&lt;p&gt;bar&lt;/p&gt;</div>

ちなみに、パラメータに関数を設定することも可能です。

$('ul li').text(function(index) {
  return 'item number ' + (index + 1);
});

4.html(htmlstr)について

html(htmlstr)は、指定した要素に、パラメータで指定した内容をHTMLとして設定します。

例えば、次のようにパラメータにHTMLを記述すると、すべてHTMLとして設定されます。

$('.foo').text('<p>bar</p>');

実行すると次のようになります。

<div class="foo"><p>bar</p></div>

こちらもtext(str)同様、パラメータに関数を設定することも可能です。

$('.foo').html(function() {
  var emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

ということで、text()とhtml()は用途に応じて使い分けましょう。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3