ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月14日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

ミディアム(Medium)で文を読むとき、下にスクロールするときは、上部のメニュー(ヘッダ)の部分が表示されていないが、マウスを上にスクロールすると、メニューの部分が表示されます。

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

Mediumのように上下にスクロールに応じて、ヘッダーの表示/非表示するでミディアムのように実装する方法が説明されています。 エレガントなテーマの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

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

メモ:



コメントを残す

コメント