アストラテーマ:スクロール時にヘッダーを固定する

Last Updated:2023年10月08日| | コメントを残す

WordPress アストラテーマの場合は、有料版でヘッダーを固定するオプションがあります。 この記事では Astra テーマ 無料版が適用された WordPress サイトでユーザーが下にスクロールするとヘッダーを非表示にし、上にスクロールするとヘッダーを表示する方法について説明します。

アストラ(Astra) テーマでヘッダーを常に固定する

常にヘッダーを固定したい場合は、次の簡単なCSSコードを使用できます。

/* 
    Description: Make header sticky for WordPress Astra Theme
    Explanation: This CSS code block is designed to make the header of 
                 a website using the WordPress Astra Theme sticky/fixed 
                 at the top of the page, ensuring it remains visible while 
                 scrolling on desktop screens with a minimum width of 921px. 
                 Additional padding is added to the site content to 
                 prevent it from being obscured by the sticky header.
*/

@media (min-width: 921px) {
    .site-header {
        z-index: 99;
        position: fixed;
        width: 100%;
        top: 0;
    }

    .site-content {
        padding-top: 160px; /* Adjust according to your header's actual height */
    }
}

site-contentのpadding-top値は実際のヘッダーの高さ値に置き換えられます。 上記のコード ルックス » カスタマイズ » 追加 CSS セクションに追加したり、 チャイルドテーマ 内のスタイルシート(style.css)ファイルに追加します。

上記のコードはデスクトップでのみ適用されます。 モバイルでも適用するには、モバイル用 メディアクエリを別途追加する必要があります。 上記のコードからメディアクエリ部分を削除すると、PCとデスクトップのヘッダーの下の余白が異なるため、モバイルでは不器用に見えます。 モバイルコードでは、余白を適切に調整するようにします。

アストラテーマでスクロール時にヘッダを固定する

ユーザーが500ピクセル下までスクロールしてヘッダーを上部に固定したい場合は、次のCSSコードとJavaScriptを使用できます。 スクロールに関係なく常に固定したい場合は、上記の「アストラテーマでヘッダーを常に固定する」部分のコードを使用してください。

CSSコード:

.site-header {
    z-index: 99;
    width: 100%;
    transition: top 2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.site-header.fixed {
    position: fixed;
    top: 0;
}

JavaScriptコード:

<script>
const header = document.querySelector('.site-header');
const content = document.querySelector('.site-content');
const hideAfter = 500; // The scroll position to trigger the header fix

let lastScrollTop = 0;
let isHeaderFixed = false;

window.addEventListener('scroll', () => {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    
    if (scrollTop > hideAfter && !isHeaderFixed) {
        header.style.top = '-100%'; // Set initial position out of view
        header.classList.add('fixed');
        // Animate header sliding down
        setTimeout(() => {
            header.style.top = '0';
        }, 0);
        isHeaderFixed = true;
    } else if (scrollTop <= hideAfter && isHeaderFixed) {
        // Animate header sliding up
        header.style.top = '-100%';
        // Remove fixed class after animation completes
        setTimeout(() => {
            header.classList.remove('fixed');
            isHeaderFixed = false;
        }, 500); // should match transition duration in CSS
    }
    
    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}, false);
</script>

上記のコードはモバイルとデスクトップの両方で動作します。

CSSコードも同様 ルックス » カスタマイズ » 追加 CSS セクションに追加します。 JavaScriptコードは「WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法「を参照して読み込むことができます。 WPコードなどのプラグインを使用して、フッターセクションにコードを追加することもできます。

プラグインを使用してヘッダを固定する

簡単な方法では、Sticky Menu&Sticky Headerプラグインを使用してヘッダーを簡単に固定できます。 詳しくは、「WordPress メニューとヘッダを固定しよう - Sticky Menu&Sticky Headerプラグイン「記事を参考にしてください。

最後に、

以上で、アストラテーマでヘッダーを固定する方法について見てきました。 無料版を使用している場合は、上記の方法でヘッダーを固定できます。

Newspaper など一部の有料テーマでは、ヘッダーを固定するオプションが提供されています。 GeneratePress テーマ有料版ではヘッダーを固定するオプションが提供されています。特にSticky Navigation設定ページでは Hide when scrolling down オプションをチェックすると、ユーザーが画面を下にスクロールするとナビゲーションが非表示になり、画面を上にスクロールするとナビゲーションが上部に固定されて表示されます。 (以前のミディアムブログのヘッダの仕組みと同じです。)

アストラテーマ:スクロール時にヘッダを固定する2

GeneratePress 無料版でヘッダーを固定する方法については、時間になると別の記事でまとめてみましょう。 同様に、Sticky Menu&Sticky Headerなどのプラグインを使用すると、簡単に目的の要素を固定できます。

参照


コメントを残す

コメント

割引ニュース
DiviレイアウトAI発売記念割引!
AIで画像、テキスト、コーディング、フルページレイアウトを生成可能
ベストセラー WordPress テーマDivi
0
仕事
0
시간
0
0
期間限定
You This Coupon Code in Checkout
Click the code to Copy