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

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

はてなブログのタイトル（#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;
}