ねごとめも背景

    ねごとめも



    作成したプログラムは、こちらでも公開しています。
    よかったら覗いてみてください。_(┐「ε:)_
    → javascript,SVG で作成したプログラム置き場
    → プログラム一覧 - (2)

    スクロール時にカラム(メニュー)下部を固定表示 javascript

    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);
    

    2016/02/29 [22:45]

    カウンター

    プロフィール

    negotoy

    Author:negotoy
    好きな選手権 :chara選手権
    好きなコーナー :リスナーが凸して
    椎名林檎の丸の内を歌うコーナー

    PC ゲーム歴 :
    モバゲーのタイピングゲームで
    タイピングの練習(サービス終了)
    ニックネーム : クッキー
    以降ゲーム歴なし

    [ YouTube ]

    chara : あいのうた
    椎名林檎 : ありあまる富
    かせきさいだぁ : じゃっ 夏なんで
    阿部真央 : 貴方の恋人になりたいのです

    最新記事

    カテゴリ

    カレンダー

    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 - - - - -


    PAGE TOP
    広告: