スクロールとクリック制御がバッティングする
受付中
回答 3
投稿
- 評価
- クリップ 0
- VIEW 4,557
内部のリンクをクリックするとページ下部「hoge-anchor」要素へページ内遷移します。
<div class="hoge"><a href="#hoge-anchor">「hoge-anchor」へ</div></div>
$(function() {
var header = $('.hoge');
header.css('top', '-150px');
var showFlag = false;
//-----[header-min]
$(this).scroll(function () {
if ($(this).scrollTop() > 600) {
if (showFlag == false) {
showFlag = true;
header.stop().animate({'top' : '0'});
}
} else {
if (showFlag) {
showFlag = false;
header.stop().animate({'top' : '-150px'});
}
}
});
});
確認したい内容は、リンクをクリックすると「hoge」を非表示(top:-150px)にする方法です。
クリックイベントで実現することは分かるのですが、「hoge-anchor」が600px以下にあるので上記スクロール処理とのバッティングでうまく動作しませんでした。
またその他要望としては、一旦非表示になっても再スクロール時の現在地が600px以上のエリアであれば再度「hoge」を出現させたいです。
ご教授の程よろしくお願いいたします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
0
画面を作って試してみましたが、ページをスクロールするとscrollイベントが複数発生するようです。そのためにうまく動かないのでは?
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
<!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 で確認済み
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
もし"#hoge-anchor"を600px以上のところに置くなら、600px以上への移動がリンクのクリックによるものかどうかのフラグを導入するのが簡単です。
リンク(ここではクラス"hogehoge"を付けました)にclick()を導入し、その中で<div>を隠し、さらにフラグをセットします。windowのscroll()の中では、フラグがセットされていない場合にのみ600px以上スクロールの処理をします。さらにフラグをクリアします。
$(function() {
var scrollByClick = false; // このフラグを導入しました。
var header = $('.hoge');
header.css('top', '-150px');
var showFlag = false;
//-----[header-min]
$(this).scroll(function () {
if ($(this).scrollTop() > 600) {
if (!scrollByClick && showFlag == false) {
showFlag = true;
header.stop().animate({'top' : '0'});
}
} else {
if (showFlag) {
showFlag = false;
header.stop().animate({'top' : '-150px'});
}
}
scrollByClick = false;
});
// <div class="hoge"><a href="#hoge-anchor" class="hogehoge">「hoge-anchor」へ</a></div>とします。
// ちなみに</a>が間違って</div>になっています。
$('.hogehoge').click(function() {
showFlag = false;
header.stop().animate({'top' : '-150px'});
scrollByClick = true;
});
});
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.09%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2015/10/30 10:06
はい、スクロールイベントとのバッティングが原因ということは理解しています。
ですので、その解決方法を伺いたいのです。