数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ

ねごとめも背景

# ねごとめも

# カウンター

# プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。
fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。
プログラム実行の前に必ずコードの確認をお願いします。

# 最新記事

# カレンダー

01 | 2016/02 | 03
- 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 - - - - -

# スポンサードリンク

{ <pre></pre> タグ版のテキストエディタ作成しました }

Yahoo のトップページに設置してあるページを下へスクロールした時に
右カラム(メニュー)が固定表示される javascript のが気になって...。
Yahoo の javascript を覗いてみたけど、理解できるはずもなく。。。
右往左往しながら、2 ~ カラムホームページをのスクロールした時に
左右に設置したメニューが固定表示されるjavascript を自分なりに書いてみました。
fc2 ブログに、この javascript を設置したテンプレートを作成(申請中の物もあります)していますので、
よかったら覗いてみて下さい。
まだ、訂正が必要な箇所があるかもしれません。(・_・;)



[ index.html ]

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet"  href="style.css">
        <script type="text/javascript" src="column.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <header>
            </header>
            <section id="left_content">
            main_content
            </section><!--/left_content-->
            <section id="right_content">
            <!--
                <div id="menu" style="width:100%;height:500px;background-color:green">
                </div>
            -->
                <div id="recommend_box">
                    <div id="recommend">
                        <ul>
                            <li>menu-a</li>
                            <li>menu-b</li>
                            <li>menu-c</li>
                            <li>menu-d</li>
                            <li>menu-e</li>
                            <li>menu-f</li>
                            <li>menu-g</li>
                            <li>menu-h</li>
                            <li>menu-i</li>
                            <li>menu-j</li>
                        </ul>
                    </div><!--/recommend-->
                </div><!--/recommend_box-->
            </section><!--/right_content-->
            <footer>
            footer
            </footer>
        </div>
     </body>
</html>



[ style.css ]

#wrapper{
    width:80%;
    height:auto;
    margin:5px auto;
    background-color:orange;
}
header,footer{
    width:100%;
    height:100px;
    background-color:red;
}
#left_content{
    width:75%;
    height:2500px;
    float:left;
    background-color:gray;
}
#right_content{
    width:25%;
    height:auto;
    float:right;
    background-color:blue;
}
#right_content > #recommend_box{
    width:90%;
    height:auto;
    position:relative;
    overflow:visible;
    margin:0px auto;
    background-color:pink;
}
#right_content > #recommend_box > #recommend{
    background-color:orange;
}
#right_content > #recommend_box > #recommend > ul{
    padding:0px;
    margin:0px;
}
#right_content > #recommend_box > #recommend > ul > li{
    list-style-position:inside;
    padding:10px 0px;
    margin:0px 0px;
}
footer{
    clear:both;
}

.static_style{
}
.fixed_top{
    position:fixed;
    top:0px;
}
.fixed_bottom{
    position:fixed;
    bottom:0px;
}
.absolute_bottom{
    position:absolute;
    bottom:0px;
}



[ column.js ]

/*** http://negotoy.blog.fc2.com/ ***/
var win=window;
var doc=document;
function addEvent(tar,evt,fnc){ if(doc.addEventListener){ tar.addEventListener(evt,fnc,false); }else if(doc.attachEvent){ tar.attachEvent("on"+evt,fnc); }else{;} }
function $(id){ return doc.getElementById(id); }
function pickTarget(id)
{//3カラム用
var target=null;
    if(id=="left_recommend")
    {
        target=($("main_content").offsetHeight>$("right_recommend").offsetHeight) ? $("main_content") : $("right_recommend");
    }
    if(id=="right_recommend")
    {
        target=($("main_content").offsetHeight>$("left_recommend").offsetHeight) ? $("main_content") : $("left_recommend");
    }
    return target;
}
function columnPosition(obj,target,parent)
{
    this.obj=obj;
    this.target=target;
    this.parent=parent;
    this.html_hei=win.innerHeight;
    this.css="static";
    this.margin=0;
    this.target_hei=0;
    this.column_hei=0;
}
columnPosition.prototype=
{
    scroll:function()
    {
        if(this.target_hei==this.column_hei)
        {
        var css="static_style";
        var type=0;        
        var column_content_top=this.parent.getBoundingClientRect().top;
        var footer_top=doc.getElementsByTagName("footer")[0].getBoundingClientRect().top-this.html_hei;
            if(this.html_hei>this.obj.offsetHeight)
            {
                if(column_content_top<0)
                {
                    css="fixed_top";
                    type=1;
                }
                if(footer_top+this.margin<0)
                {
                    css="absolute_bottom";
                    type=2;
                }
            }
            else
            {
                if((column_content_top+this.obj.offsetHeight-this.html_hei)<0)
                {
                    css="fixed_bottom";
                    type=3;
                }
                if(footer_top<0)
                {
                    css="absolute_bottom";
                    type=4;
                }
            }
            //console.log(css+"     "+type);
            if(this.css!=css)
            {
                this.obj.className=css;
                this.css=css;
            }
        }
    },
    setTarget:function(target)
    {
        this.target=target;
    },
    setParam:function()
    {
        this.html_hei=win.innerHeight;
        this.obj.style.width=this.parent.offsetWidth+"px";
    var target_hei=this.target.offsetHeight;
    var column_top=this.parent.parentNode.getBoundingClientRect().top;
    var parent_top=this.parent.getBoundingClientRect().top;
    var margin=parent_top-column_top;
    var parent_hei=target_hei-margin;
        parent_hei=(parent_hei<this.obj.offsetHeight) ? this.obj.offsetHeight : parent_hei;//2016/03/02 訂正
        this.parent.style.height=(parent_hei)+"px";
        this.css="static";
        this.margin=this.html_hei-this.obj.offsetHeight;
        this.target_hei=this.target.offsetHeight;
        this.column_hei=this.parent.parentNode.offsetHeight;
    }
};
var setEvent=function()
{
var fixed_id=["recommend"];
    win.fixed=[];
    for(var i=0;i<fixed_id.length;i++)
    {
        win.fixed[i]=new columnPosition($(fixed_id[i]),$("left_content"),$(fixed_id[i]).parentNode);
        win.fixed[i].setParam();
        win.fixed[i].scroll();
    }
    addEvent(window,"scroll",function()
    {
        for(i=0;i<this.fixed.length;i++)
        {
            this.fixed[i].scroll();
        }
    });
    addEvent(window,"resize",function()
    {
        for(i=0;i<this.fixed.length;i++)
        {
            this.fixed[i].setParam();
            this.fixed[i].scroll();
        }
    });
    setInterval(function()
    {//onload イベント後に読み込まれる iframe や javascript での要素追加や削除を監視
        for(i=0;i<win.fixed.length;i++)
        {
            win.fixed[i].setParam();
            win.fixed[i].scroll();
        }
    },1000);
}
addEvent(window,"load",setEvent);

# スポンサードリンク