IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

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

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

2017/01/17 CSS, javascript, はてなプラグイン, はてなブログ

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

はてなブログのタイトル(#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;
}
はてなブログの画像クリックポップアップ表示をCSS一行で解除する方法
KB3213986 更新失敗/Windows10 Version1607 の累積的な更新プログラム
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com