Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【js】沈黙を越えて。『スクロールナビ.js(はてブロ.ver)』。プロトタイプ

まだ完全ではありません。また、JavaScriptも🔰ゆえ、ムダ等多いと思いますが…::(っ`ω´c)::💦

 何にせよ、出来た事がかなり嬉しい(つ´ω`c)✨✨♪

 

まだ「h3ハイライト」しかできませんが宜しければどうぞ🌟 「設定」→「フッター」にコピペで実装できます。他のテーマでできるか試してみましたが、できました🌟

ただ、まだ完全にはスタイリングしていないので、「雰囲気を楽しむ」くらいの感じですが|*´-`)🌟

後日、また理解が深まり次第、チュートリアルも書ければいいなと思っておりまする٩(๑•̀ω•́๑)۶✨✨♪

 

注意:記事ページ ( body.page-entry )」で作動するようになっています。「あれ?コピペしたけどならないよ?」という方は、「もくじをつけた記事」の「タイトルをクリック」してみて下さい。そうすると、その記事だけが表示される「記事ページ」になります。 

 

 

「もくじ」の表示のさせ方

記事内のもくじを表示させたい箇所に、[:contents] と書けばOKです。「見出し」をした箇所が、自動的にもくじに追加されます。

 

実際のデモ画像

こんな感じになります↓( はてな公式テーマ「 Life」でテスト) 

f:id:DDramonQ:20161208221827p:plain

 

 

f:id:DDramonQ:20161208221841p:plain

 

JavaScript

<script>
var bodyCh = document.body.className;
//======================= [ page-entry ]
if ( bodyCh.includes('page-entry') ) {
    
    
    //======  Scroll_Spy_❶
    if( document.getElementsByClassName("table-of-contents")[0] ) {
        
        var table = document.getElementsByClassName("table-of-contents")[0]
        var eHeader = document.getElementsByClassName("entry-header")[0];
        var eHeader_B = eHeader.getBoundingClientRect().bottom;
        var table_T = table.getBoundingClientRect().top;
        var table_H = table.getBoundingClientRect().height;
        var content = document.getElementsByClassName("entry-content")[0];
        table.style.top = eHeader_B + "px";
        
        
         //====== Sscroll_Spy_CSS_setting
        content.style.marginTop = table_H + "px";
        eHeader.style.position = "relative";
        table.style.position = "absolute";
        table.style.top = eHeader_B + "px";
        table.style.right = "0";
        table.style.width = "300px";
        table.style.height = "auto";
        table.style.zIndex = "99";
        table.style.background = "#fff";
        table.style.opacity = "1";
        
        
        //==========  Scroll_Spy_❸
        //  h3_Top  ( 「記事内」の「各H3のTop位置(数字)」をページトップから順に集め、Array に格納 )
        var h3s = document.getElementsByTagName('H3'); 
        var h3Top_arry = [];
        var n = 0;
        
        while ( n < h3s.length ) {
            var h3 = h3s[n];
            var h3_Top = h3.getBoundingClientRect().top;
            h3Top_arry.push(h3_Top);
            n++;
        }
        
             
        //  h3 in Table  ( 「もくじ内」の「H3( Object )」を順に集め、Array に格納 )
        
        var tchildren = table.children;
        var h3Ta_arry = [];
        var i = 0;
        
        while ( i < tchildren.length ) {
            var t_h3 = tchildren[i].firstChild;
            h3Ta_arry[i] = t_h3;
            i++;
        }
        
        
        
        
        
        
        
        /*===================*
            Scroll Event
        /*===================*/
        window.onscroll = function() {
            var scrY = window.scrollY;
            
            
            //======  Scroll_Spy_❷ ( もくじの「position: absolute | fixed」チェンジ )
            if ( scrY > eHeader_B ) {
                table.style.position = "fixed";
                table.style.top = "0";
                table.style.opacity = "0.9";
            } else if ( scrY <= eHeader_B ) {
                table.style.position = "absolute";
                table.style.top = eHeader_B + "px";
                table.style.opacity = "";
                
            }
                
            
            
             //==========  Scroll_Spy_➍ ( もくじハイライト )
            var m = 0;
            while ( m < h3s.length ) {
            
                if ( h3Top_arry[m] <= scrY && scrY < h3Top_arry[m+1] ) {
                    h3Ta_arry[m].style.background = "pink";
                } else {
                    h3Ta_arry[m].style.background = "";
                }
                
        
            m++;
            }
            
        }  //  .onscroll
          
    }  // if ( includes ul.table-of-contents )
    
}  // if ( .page-entry )
</script>

 

 

今回もそうですが、「誰かに向けて書く」事によって、整理でき、より自分の理解も深まり気がしました🌟

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️