はてなブログのスクロールを戻すとすぐに表示されるタイトル＆メニュー

あまり役に立たないかもしれないものを作ってみました（笑）。

はてなブログのタイトル（#blog-title）にカテゴリー（.hatena-module-category）を移動してメニュー化し、スクロールを進めた場合は通常通りタイトル＆メニューは消えてゆきますが、逆にスクロールを戻すと、どの位置でも直ぐにタイトル＆メニューが現れるスクリプトです。

言葉では分かりにくいですのでサンプルサイトです。

サンプル記事2で試してもらった方が分かりやすいです。サンプルですので、細かいところはツッコミなしでお願いします。

普通にスクロールしていきますと変わったところはありませんが、黄色いバックのタイトルが見えなくなったところで逆にスクロールしてみてください。スクロールがどの位置でもタイトルブロックが直ぐに現れ、そのままトップまでスクロールしますと元の位置に戻ります。

あるサイトで見かけて面白いなあと思い、はてなブログに再現してみました。

(function(){
    var category = document.getElementsByClassName('hatena-module-category')[0];
    Array.prototype.forEach.call(category.getElementsByTagName('a'), function(b){
        b.textContent = b.textContent.replace(/\s\([0-9]{1,}\)/g, '');
    });
    document.getElementById('blog-title-content').appendChild(category);


    var fixed_block = document.getElementById('blog-title');
    var wrapper = document.getElementById('container');
    var prev_scroll = 0;
    fixed_block.style.top = '0px';


    function fixedBlock() {
        var wrapper_offset = wrapper.getBoundingClientRect().top;
        var scroll = document.body.scrollTop || document.documentElement.scrollTop;
        var new_scroll = scroll >= 0 ? scroll : 0;
        var diff_scroll = new_scroll - prev_scroll;
        var fixed_block_top = parseInt(fixed_block.style.top, 10);
        var fixed_block_h = fixed_block.clientHeight;


        if(new_scroll >= wrapper_offset) {
            fixed_block.classList.add('fixed-block');
            if(new_scroll >= prev_scroll) {
                fixed_block.style.top = (fixed_block_top - diff_scroll >= -fixed_block_h ? fixed_block_top - diff_scroll : -fixed_block_h) + 'px';
            } else {
                fixed_block.style.top = (fixed_block_top - diff_scroll <= 0 ? fixed_block_top - diff_scroll : 0) + 'px';
            }
        } else {
            fixed_block.style.top = 0;
            fixed_block.classList.remove('fixed-block');
        }


        prev_scroll = new_scroll;
    }


    window.onscroll = fixedBlock;
})();

#blog-title {
    height: 100px;
    background: gold;
    line-height: 100px;
    position: absolute;
    width: 810px;
    margin: 0 auto;
    padding: 0;
    z-index: 9999;
}


#content {
    padding-top: 150px;
}


#blog-title.fixed-block {
    position: fixed;
}


#blog-title-content {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}


.hatena-module-category .hatena-module-title {
    display: none;
}


.hatena-module-category ul.hatena-urllist {
    display: -webkit-flex;
    display: flex;
    line-height: 100px;
}


.hatena-module-category a {
    text-decoration: none;
    padding-right: 20px;
    font-weight: bold;
}