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/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

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

2022/06/26

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

2022/06/13

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

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ212
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress37
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ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