attitude-スマホ時にスクロールするとメニューを画面トップに固定したい

  • 解決済 yusaku

    (@yusaku)


    6年、 5ヶ月前

    テーマAttitudeを使っています。
    スマホ時に、スクロールしてもトップにグローバルナビを固定表示したいと思い、
    position: fixedを使って、スタイルシートを以下のようにしました。

    
/* All Mobile Portrait size smaller than 768 (devices and browsers) */
@media only screen and (max-width: 767px) {

～中略～

/* Responsive Navigation */
	.menu-toggle {
		display: block;
		background-color: rgba(0, 0, 0, 0);
		font-size: 0;
		border: 0 none;
		padding: 0;
		color: #999;
		width: 70px;
		height: 40px;
		float: right;
		position: fixed;
		top: 0;
		margin-top: 50px;
		right:30px;
		cursor: pointer;
		 border:1px solid #ccc;
		 border-radius:5px;
  　　　　　　  box-shadow:0px 0px 10px #c3e1ff;
	}

    スクロールして動作確認してみると、メニューは固定されますが、
    メニューをタップした時、アコーディオンの開く位置は画面上に固定されずに、元の位置のままでした。

    下の方にスクロールしてからメニューを開くと、画面に表示されない上の方にアコーディオンが展開してしまい、うまくいきません。

    うまくアコーディオンを表示するには、どのようにしたらよいでしょうか？

    ヘルプの必要なページ: [リンクを見るにはログイン]

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • ishitaka

    (@ishitaka)

    6年、 5ヶ月前

    こんにちは

    JavaScript(jQuery) を使ったものですがどうでしょうか。
    スタイルだけでもできそうな気もしますが・・・ちょっと思いつきませんでした。

    functions.php に

    function my_enqueue_scripts() {
	if( !wp_script_is( 'jquery', 'done' ) ) {
		wp_enqueue_script( 'jquery' );
	}

	$script = <<<SCRIPT
(function($) {
	/* スクロールによりメニュー（#access）が隠れたら、上部に固定する(fixed クラスを付与)。 */
	$(function() {
		var nav = $('#access');
		if (!nav) { return; }
		var offsetTop = nav.offset().top;
		var floatMenu = function() {
			if ($(window).scrollTop() > offsetTop) {
				nav.addClass('fixed');
			} else {
				nav.removeClass('fixed');
			}
		};
		$(window).scroll(floatMenu);
		$('body').bind('touchmove', floatMenu);
	});
})(jQuery);
SCRIPT;

	wp_add_inline_script( 'jquery-migrate', $script, 'after' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

    style.css 等に

    @media only screen and (max-width: 767px) {
	.menu-toggle {

		（省略）

		z-index: 100;
	}

	#access.fixed {
		width: 100%;
		height: 100%;
		left: 0;
		position: fixed;
		top: 0;
		z-index: 99;
		overflow: scroll;
	}

	#access.fixed .container {
		margin: 0 auto;
		padding: 0 12px;
		background-color: #fff;
		border-bottom: 1px solid #EAEAEA;
	}
}
    • この返信は6年、 5ヶ月前にishitakaが編集しました。理由: 誤字
    トピック投稿者 yusaku

    (@yusaku)

    6年、 5ヶ月前

    ishitaka様

    うまくいきました！
    アドバイス、ありがとうございます。
    大変お世話になりました。
    本当にありがとうございます。

    トピック投稿者 yusaku

    (@yusaku)

    6年、 5ヶ月前

    すみません、メニューの固定表示はうまくいったのですが、「トップへ戻る」ボタンが効かなくなってしまいました。

    パソコン表示では大丈夫なのですが、スマホでトップへ戻るボタンを押しても無反応になってしまいました。

    どのように対処すればよいでしょうか？

    ishitaka

    (@ishitaka)

    6年、 5ヶ月前

    おっと、失礼しました。

    下記のスタイルを、追記してみてください。

    @media only screen and (max-width: 767px) {

	（省略）

	#access {
		display: none;
	}
	.toggled-on #access {
		display: block;
	}
}
    • この返信は6年、 5ヶ月前にishitakaが編集しました。
    トピック投稿者 yusaku

    (@yusaku)

    6年、 5ヶ月前

    ありがとうございます！
    解決しました。
    重ね重ね、大変お世話になりました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「attitude-スマホ時にスクロールするとメニューを画面トップに固定したい」には新たに返信することはできません。

タグ