IMUZA.com

Xserver<<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で送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com