【HTML/CSS/Javascript】サイドバー固定できたった!簡単すぎるww

, , No Comments
今まで意味不明すぎて断念してましたがある程度独学してたらすんなりサイドバー固定できちゃったっていう・・・。
なんとも言えないがっかり感が管理人を襲っておりますが参照URLと手順を往復勉強として更新しとこうと思います(。・ω・)

記事の内容文が短いと左サイドバーで固定されてる広告3つは何の変化もないですが、長ったらしいWoTMODの作成記事とかやたらと長い記事文章が書かれてる記事だとしっかり固定されてくれてます(日本語がちょっとおかしい)
ホームページに飛ぶと記事数を増やしてあるので実感があると思われますが、なんでこんな簡単な設置に詰んでたのか・・・。謎である( ・´ー・`)←
たまにマビノギの広告が表示されてたりしますが・・・

マビノギ ロナパンサーバー 広告

期間限定サーバーだという重要項目がないのだがこれは・・・(´゚д゚`)


参考URLはこちら。
以下のコードをHTMLのhead内に全て入れるだけです(。・ω・)

<script type="text/javascript" src="http://blog-imgs-49.fc2.com/e/1/1/e1116/jquery183min.js"></script>
<script type="text/javascript">  
(function($) {  
    $(document).ready(function() {  
        /* 
        Ads Sidewinder 
        by Hamachiya2. http://d.hatena.ne.jp/Hamachiya2/20120820/adsense_sidewinder 
        */  
        var main = $('#main'); // メインカラムのID  
        var side = $('#side'); // サイドバーのID  
        var wrapper = $('.自分で決める固有ID'); // 固定したい要素を包むID 
  
        var w = $(window);  
        var wrapperHeight = wrapper.outerHeight();  
        var wrapperTop = wrapper.offset().top;  
        var sideLeft = side.offset().left;  
  
        var sideMargin = {  
            top: side.css('margin-top') ? side.css('margin-top') : 0,  
            right: side.css('margin-right') ? side.css('margin-right') : 0,  
            bottom: side.css('margin-bottom') ? side.css('margin-bottom') : 0,  
            left: side.css('margin-left') ? side.css('margin-left') : 0  
        };  
  
        var winLeft;  
        var pos;  
  
        var scrollAdjust = function() {  
            sideHeight = side.outerHeight();  
            mainHeight = main.outerHeight();  
            mainAbs = main.offset().top + mainHeight;  
            var winTop = w.scrollTop();  
            winLeft = w.scrollLeft();  
            var winHeight = w.height();  
            var nf = (winTop > wrapperTop) && (mainHeight > sideHeight) ? true : false;  
            pos = !nf ? 'static' : (winTop + wrapperHeight) > mainAbs ? 'absolute' : 'fixed';  
            if (pos === 'fixed') {  
                side.css({  
                    position: pos,  
                    top: '',  
                    bottom: winHeight - wrapperHeight,  
                    left: sideLeft - winLeft,  
                    margin: 0  
                });  
  
            } else if (pos === 'absolute') {  
                side.css({  
                    position: pos,  
                    top: mainAbs - sideHeight,  
                    bottom: '',  
                    left: sideLeft,  
                    margin: 0  
                });  
  
            } else {  
                side.css({  
                    position: pos,  
                    marginTop: sideMargin.top,  
                    marginRight: sideMargin.right,  
                    marginBottom: sideMargin.bottom,  
                    marginLeft: sideMargin.left  
                });  
            }  
        };  
  
        var resizeAdjust = function() {  
            side.css({  
                position:'static',  
                marginTop: sideMargin.top,  
                marginRight: sideMargin.right,  
                marginBottom: sideMargin.bottom,  
                marginLeft: sideMargin.left  
            });  
            sideLeft = side.offset().left;  
            winLeft = w.scrollLeft();  
            if (pos === 'fixed') {  
                side.css({  
                    position: pos,  
                    left: sideLeft - winLeft,  
                    margin: 0  
                });  
  
            } else if (pos === 'absolute') {  
                side.css({  
                    position: pos,  
                    left: sideLeft,  
                    margin: 0  
                });  
            }  
        };  
        w.on('load', scrollAdjust);  
        w.on('scroll', scrollAdjust);  
        w.on('resize', resizeAdjust);  
    });  
})(jQuery);  
</script>  


これをhead内に入れてあげるだけなんですが、ここで一番苦戦してしまう場所は


var main = $('#main'); // メインカラムのID
var side = $('#side'); // サイドバーのID
var wrapper = $('.自分で決める固有ID'); // 固定したい要素を包むID



になると思います、ここを説明します。
メインカラムのIDとは記事全体をおおっているIDの事を指します。
僕のブログだとこうなってます。

メインカラム

次にサイドバーをおおているIDを探す。

サイドバーのID

右側のウィンドウは自ブログをF12を押した時に表示されるヤーツをウィンドウ化してるだけです。
メインカラムのIDサイドとサイドバーのIDはこんな感じ。
後はフリーエリアに固定したいコード、テキストを設置して全体を固有IDで包みます。
固有IDとは自分で決めて下さい。なんでも構わいません。
形としてはこんな感じです。
サイドバー固定 自分で決める固有ID
ほんとこんな簡単なのになぜ詰んだのか・・・。
けどいつかはこんなコードを自由自在に扱える人になってみたい・・・とか夢見てる( ・`ω・´)

0 コメント :

コメントを投稿

※閲覧記事と無関係なコメントはスパムとみなす場合がございます。
(ㆁωㆁ*)管理人がコメントを承認するまで表示されません(ㆁωㆁ*)

top