WordPress Diviメニューがミディアムのように動作するように作成

ミディアム（Medium）で文を読むとき、下にスクロールするときは、上部のメニュー（ヘッダ）の部分が表示されていないが、マウスを上にスクロールすると、メニューの部分が表示されます。 ミディアムようDiviテーマで下にスクロールすると、メニューを表示し、上にスクロールすると、メニューを非表示にしたい場合は、この記事で提示するコードを活用することができます。

WordPress Diviメニューがミディアムのように動作するように作成

ミディアム文を一つ見ながらテストしてみると、どのように動作するかよりよく理解されます。 仮にこのミディアム記事では、マウスを下にスクロールすると、ヘッダーが表示されませんが書か中間に上に移動するために、マウスを上にスクロールすると、メニューの部分が表示されます。 （アップデート： もうミディアムでこのように動作しません。）

Mediumのように上下にスクロールに応じて、ヘッダーの表示/非表示するでミディアムのように実装する方法が説明されています。 エレガント ThemesのDiviテーマ（現在、このブログに使用されている）も、同じ機能を実装することができます。 次のような方法でDiviから下にスクロールすると、ヘッダーを非表示に上にスクロールすると、ヘッダーを表示することができます。

まず、 Divi>テーマオプション>一般的なに移動し、下部の ユーザーカスタムCSS次のCSSコードを追加します。

/**
* 헤더 스타일 - Header Styles
*/
#main-header {
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}

#main-header.invisible {
opacity: 0;
top: -1000% !important;
}

.et-fixed-header#main-header {
opacity: 0;
}

#main-header.detached {
position: fixed !important;
top: 0;
opacity: 1 !important;
}

そして、次のjQueryコードを追加するようにします。 DiviテーマではJavaScript / jQueryを挿入する方法は この記事を参考にしてみてください。

<script type="text/javascript">
$(document).ready(function() {

/**
* Menu Hide
*/
var previousScroll = 0, // previous scroll position, 이전 스크롤 위치
menuOffset = 60, // height of menu (once scroll passed it, menu is hidden), 메뉴 높이
detachPoint = 650, // point of detach (after scroll passed it, menu is fixed), 분리 위치
hideShowOffset = 6; // scrolling value after which triggers hide/show menu

/**
* on scroll hide/show menu, 스크롤 시 메뉴 숨기기/표시
*/
$(window).scroll(function() {
if (!$('#main-header').hasClass('expanded')) {
var currentScroll = $(this).scrollTop(), // gets current scroll position
scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling

// if scrolled past menu
if (currentScroll > menuOffset) {
// if scrolled past detach point add class to fix menu
if (currentScroll > detachPoint) {
if (!$('#main-header').hasClass('detached'))
$('#main-header').addClass('detached');
}

// if scrolling faster than hideShowOffset hide/show menu
if (scrollDifference >= hideShowOffset) {
if (currentScroll > previousScroll) {
// scrolling down; hide menu
if (!$('#main-header').hasClass('invisible'))
$('#main-header').addClass('invisible');
} else {
// scrolling up; show menu
if ($('#main-header').hasClass('invisible'))
$('#main-header').removeClass('invisible');
}
}
} else {
// only remove “detached” class if user is at the top of document (menu jump fix)
if (currentScroll <= 0){
$('#main-header').removeClass();
}
}

// if user is at the bottom of document show menu, ユーザー가 문서의 맨 아래에 도달하면 메뉴 표시
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
$('#main-header').removeClass('invisible');
}

// replace previous scroll position with new one, 이전 스크롤 위치를 새로운 위치로 바꿈
previousScroll = currentScroll;
}
})

});
</script>
// Source: Adam Haworth

実際のテストしてみるとうまく動作します。 このように、下にスクロールするときは、メニューを非表示に上にスクロールするときは、メニューを表示すると、記事を読むにさらに集中するのに役立ちそうです。

最後に、

WordPress Diviテーマでマウスを下にスクロールすると、メニューが非表示状態になって上にマウスをスクロールすると、メニューが再表示されるようにする方法について説明しました。

WordPressは Newspaper와 GeneratePressのようないくつかのテーマでこのように動作するようにするためのオプションに提供されます。

メモ：

• エレガント ThemesのDiviテーマツアー
• エレガント Themes Diviリニューアル
• WordPress Diviテーマのヘッダのスタイルを変更する方法