熱帯魚を飼おうと準備中。

めだかをいただいたので、きっちり飼ってやろうと、小さめですが水槽一式を買ってきました。

以前から熱帯魚を飼いたいと思っていたんですが、この機会にいろいろ調べてみると、熱帯魚はきっちりした水の管理が必須なんですね。温度だけかと思っていた。。。

まずバクテリアが住んでいる水を作り、魚の種類によって硬水、軟水、pHを整えてやる、というのが必要なようで、2・3週間はめだかだけを入れる予定だったんですが、めだかだけだともの寂しかったので、苔を食べてくれるというヤマトヌマエビ↓というのも買って入れて見ました。

ヤマトヌマエビ

ところが、こやつらは小さい魚は補食してしまうということがあるらしく、すぐさま撤去。。。ということで、今のところめだかだけが泳いでます。

水が整えば、青と赤のコントラストがきれいな「ネオンテトラ」を入れる予定。

あとは水草や流木をレイアウトして、もっと見た目きれいにしようといろいろ調査中。

まあ水槽が小さいのであまり、いろんな種類の魚をいれられないですが、ちょっとずつ種類を増やしていこうと思います。

jQuery – メニューをスクロールに付随させてみる

最近国内のサイトでもちょくちょく目にするようになった「スクロールに付随するメニュー（「ユニクロ 特集／+J FINAL COLLECTION | MEN – ユニクロオンラインストア[store.uniqlo.com]」のページの少し下の方にあるメニュー一覧のような動きになるもの 2011年12月2日時点）」を実装してみます。

この実装はすごく簡単で、スクロール位置と固定する要素の位置を比べ、スタイルを書き換えるだけです。

jQuery メニューをスクロールに付随させてみるサンプル（headerFixedBoxを固定）
jQuery メニューをスクロールに付随させてみるサンプル（asideFixedBoxを固定）

サイドバーに固定要素を置く場合は、フッターにかぶってしまうことがあると思うので、それを回避するように条件を加えてみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
$(function(){
floatBox("#headerFixedBox");
floatBox("#asideFixedBox", 1);
 
//ele=固定する要素、flag=サイドバーに固定する要素があり、フッターにかぶらないようにする場合に「1」を指定
function floatBox(ele, flag) {
    //固定する要素を取得
    var box = $(ele);
    //固定する要素の位置を取得
    var fixed_box_offset = box.offset();
    //固定する要素のサイズを取得
    var box_size = {"width": box.width(), "height":  box.height()};
    //フッター要素の位置を取得
    var footer_box_offset = $("#footer").offset();
    //スクロールイベントが発生したら実行
    $(window).scroll(function() {
        //スクロール位置を取得
        var scroll_val = $(this).scrollTop();
        //固定する要素の位置よりスクロール位置が大きくなれば...
        if(scroll_val > fixed_box_offset.top) {
            //固定する要素にtop:0が指定されていなければ...
            if(box.css("top") != 0) {
                //スタイルを追加
                box.css({
                    "position": "fixed",
                    "z-index": 999,
                    "width": box_size.width,
                    "height": box_size.height,
                    "top": 0,
                    "bottom": "auto"
                });
            }
            //フッターがあり、横メニューがかぶらないようにする場合は...
            if(flag == 1) {
                //フッターの位置よりスクロール位置が大きくなれば...
                if(scroll_val > (footer_box_offset.top - box_size.height)) {
                    //スタイルを追加
                    if(box.css("bottom") != 0) {
                        box.css({
                            "position": "absolute",
                            "z-index": 999,
                            "width": box_size.width,
                            "height": box_size.height,
                            "top": "auto",
                            "bottom": 0
                        });
                    }
                }
            }
        //固定する要素の位置よりスクロール位置が小さければ...
        } else {
            //固定する要素のstyle属性を削除
            box.removeAttr("style");
        }
    });
}
});

あとは固定する要素の位置を取得するための、もととなる要素のCSSに「position: relative;」を指定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
#headerFixedBoxのもととなる要素
*/
#wrap {
    position: relative;
    margin: 0 auto;
    width: 900px;
}
/*
#asideFixedBoxのもととなる要素
*/
#aside {
    position: relative;
    float: right;
    width: 280px;
    min-height: 1600px;
    background: #111;
    color: #eee;
}

と、これでスクロールしてもついてくるメニューの完成です。

コピペですぐ使えるように関数化しているのですが、関数内にフッター要素のIDを直接していしている箇所があります。もし利用される場合は、関数内の「#footer」のところを、ご自身のサイトのフッターに割り当てているIDに変更してください。

1
2
//フッター要素の位置を取得
var footer_box_offset = $("ここを書き換え").offset();

今回はスクロールしてもついてくるメニューということで簡単なものをつくりましたが、これを元にして、ある一定箇所までスクロールしたら要素を表示させる、といったこともできます。

ソースをいじってテストできるようにJS Binにも置いておきました。いろいろ確認してみたい方はどーぞ。

JS Bin ソース確認用