スクロールとクリック制御がバッティングする

以下のように600px以上スクロール時に「hoge」という固定フロートメニューを表示し
内部のリンクをクリックするとページ下部「hoge-anchor」要素へページ内遷移します。

lang
1<div class="hoge"><a href="#hoge-anchor">「hoge-anchor」へ</div></div>
2

lang
1$(function() {
2	var header = $('.hoge');
3	header.css('top', '-150px');
4	var showFlag = false;
5	
6	//-----[header-min]
7	$(this).scroll(function () {
8	  		if ($(this).scrollTop() > 600) {
9			if (showFlag == false) {
10				showFlag = true;
11				header.stop().animate({'top' : '0'});
12			}
13		} else {
14			if (showFlag) {
15				showFlag = false;
16				header.stop().animate({'top' : '-150px'});
17			}
18		}
19	});
20	});
21

確認したい内容は、リンクをクリックすると「hoge」を非表示(top:-150px)にする方法です。
クリックイベントで実現することは分かるのですが、「hoge-anchor」が600px以下にあるので上記スクロール処理とのバッティングでうまく動作しませんでした。

またその他要望としては、一旦非表示になっても再スクロール時の現在地が600px以上のエリアであれば再度「hoge」を出現させたいです。

ご教授の程よろしくお願いいたします。

行動規範の内容に同意します

回答3件

600px以上スクロールして<div>が表示されると、showFlagがセットされます。リンクをクリックするとスクロールしますが、"#hoge-anchor"が600px以上のところにあると、showFlagがtrueですから、<div>は消えません。"#hoge-anchor"が600px未満のところにあると消えます。$(this).scrollTop() > 600がfalseになりますから、elseが実行されますからね。
もし"#hoge-anchor"を600px以上のところに置くなら、600px以上への移動がリンクのクリックによるものかどうかのフラグを導入するのが簡単です。
リンク（ここではクラス"hogehoge"を付けました）にclick()を導入し、その中で<div>を隠し、さらにフラグをセットします。windowのscroll()の中では、フラグがセットされていない場合にのみ600px以上スクロールの処理をします。さらにフラグをクリアします。

JavaScript
1$(function() {
2  var scrollByClick = false;  // このフラグを導入しました。
3  var header = $('.hoge');
4  header.css('top', '-150px');
5  var showFlag = false;
6
7  //-----[header-min]
8  $(this).scroll(function () {
9    if ($(this).scrollTop() > 600) {
10      if (!scrollByClick && showFlag == false) {
11        showFlag = true;
12        header.stop().animate({'top' : '0'});
13      }
14    } else {
15      if (showFlag) {
16        showFlag = false;
17        header.stop().animate({'top' : '-150px'});
18      }
19    }
20    scrollByClick = false;
21  });
22// <div class="hoge"><a href="#hoge-anchor" class="hogehoge">「hoge-anchor」へ</a></div>とします。
23// ちなみに</a>が間違って</div>になっています。
24  $('.hogehoge').click(function() {
25    showFlag = false;
26    header.stop().animate({'top' : '-150px'});
27    scrollByClick = true;
28  });
29});
30

投稿2015/10/30 16:20

編集2015/10/30 16:28

abbey

総合スコア13

castail

2015/10/31 02:18

ご回答ありがとうございます。試したところ一度目のクリックでは消えず、「hoge-anchor」到達時に再度クリックすれば消える状態です。再度ご確認願えますでしょうか？

abbey

2015/11/01 02:10

FirefoxとGoogle Chromeでうまく動いています。コメントを付けてありませんが、scroll()内の if (!scrollByClick && showFlag == false) が if (showFlag == false) になっているとそのような動作になります。scrollByClickのスペルミスとかありませんか？

行動規範の内容に同意します


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AutoCompleteウィジェット</title>
<link type="text/css" rel="stylesheet"
  href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" />
<script type="text/javascript"
  src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {

	// Safari 以下でOK
	// Firefox 以下でOK
	// IE11 以下でOK
	// その他ブラウザは window or window.document or window.document.body
	// ページ全体のスクロールイベントハンドラの設定箇所はブラウザにより微妙に違うらしいので注意。
	var scrollLayer = $(window);
	
	var floatingMenu = $("#floatingMenu");
	
	function unbindScrollEvent() {
		scrollLayer.unbind("scroll", scrollPopupEvent);
	}
	function bindScrollEvent() {
		scrollLayer.bind("scroll", scrollPopupEvent);
	}
	function scrollPopupEvent(e) {
		var top = e.target.body.scrollTop;
		var disp = floatingMenu.css("display");
		console.debug("top=" + top + "//disp=" + disp);

		if (top >= 0 && top < 400) {
			if (disp != "none") {
				floatingMenu.hide("fast");
			}
		} else {
			if (disp != "block") {
				floatingMenu.show("slow");
			}
		}
	}
	$("#scrollToPageEnd, #scrollToPageTop").click(function(e) {
		//スクロールイベントをキャンセル
		unbindScrollEvent();
		
		// id により処理を切り分け
		var id = $(this).attr("id");
		
		var moveTo = id.lastIndexOf("End") > -1 ? $("#pageEnd").offset().top : 0;
		
		// ページ最上段 or 最下部へアニメーション
		$("html, body").animate({ scrollTop: moveTo }, 1000, "swing", function() {
				// スクロール完了後に呼ばれるコールバック
				// スクロールイベントを再設定
				//
				console.debug("スクロール完了");
				bindScrollEvent();
				
			}
		);
		
	});

	// スクロールイベント設定
	floatingMenu.hide();
	console.debug("init: " + floatingMenu.css("display"));
	bindScrollEvent();
});
</script>
<style>
#floatingMenu {
	position: fixed;
	width: 90%;
	height: 100px;
	background-color:#CDF;
	display: none;/*初期表示は非表示、600px 近辺のスクロールでポップアップする */
}
.whiteA {
	text-decoration: none;
	color: white;
}
</style>
</head>
<body>
<div id="floatingMenu">
	<a href="javascript:void(0)" id="scrollToPageEnd">ページ最下段に移動する</a>｜
	<a href="javascript:void(0)" id="scrollToPageTop">ページ先頭部に移動する</a><br />
	
</div>
<a href="javascript:void(0)" id="pageTop" class="whiteA">Top</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />A
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />B
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />C
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />D
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />E
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />F
<a href="javascript:void(0)" id="pageEnd" class="whiteA">End</a>


</body>
</html>

イメージしてるのはこんな感じですか？
Macbook Air GoogleChrome で確認済み

投稿2015/10/30 16:04

ipadcaron

総合スコア1693

CSSでは.hogeにどのような設定をされているのでしょうか。具体的な動作のイメージがわきません。初期画面では.hogeはページに表示されているのですか？ 600px以上スクロールした時にのみ.hogeが画面上に表示され、そこに表示されているリンクをクリックすると#hoge-anchorに飛ぶということなのでしょうか。
画面を作って試してみましたが、ページをスクロールするとscrollイベントが複数発生するようです。そのためにうまく動かないのでは？

投稿2015/10/29 14:29

abbey

総合スコア13

castail

2015/10/30 01:06

CSSではposition:fixed;のみ指定し、スクロールに応じてtopの値を切り替えて表示・非表示をしています。ですので、600px未満のデフォルト値では非表示(top: -150px)です。はい、スクロールイベントとのバッティングが原因ということは理解しています。ですので、その解決方法を伺いたいのです。

行動規範の内容に同意します

あなたの回答